在composition api中使用钟表钩子？

Question

我在Options API中有以下代码：

  ...
  watch: {
    $things: {
      async handler(val, oldVal) {
        this.someFunction()
        if(this.someVariable) this.getSomethingHere()
      },
      deep: true
    }
  },
  ...
})

如何使用watch hook将此代码重构为composition api？

Answer 1

watch选项的等效组合API是watch()。假设$things是一个global property，使用getCurrentInstance().appContext.config.globalProperties访问$things

import { watch, getCurrentInstance } from 'vue'

export default {
  setup() {
    const someFunction = () => {/*...*/}
    const getSomethingHere = () => {/*...*/}
    let someVariable = true

    const globals = getCurrentInstance().appContext.config.globalProperties
    watch(
      globals.$things,
      async handler(val, oldVal) {
        someFunction()
        if (someVariable) getSomethingHere()
      },
      { deep: true }
    )
  }
}