vue 3.0 watch写法

在 Vue 3.0 中，watch 选项已经被重构了，现在可以通过一个新的函数 watchEffect 来监听变化。这个函数可以自动追踪内部使用到的 state，来响应 state 的变化。举一个例子：

import { watchEffect } from 'vue'

setup() {
  const state = reactive({
    name: 'John',
    age: 30
  })

  watchEffect(() => {
    console.log(`name: ${state.name}, age: ${state.age}`)
  })
}

这段代码中，我们通过 watchEffect 来监听 state 的变化，每当 state 中的某个属性发生变化时，就会触发 watchEffect 中的回调函数。

当然，如果你想手动控制监听特定的属性变化，还可以使用另外一个新的函数 watch：

import { watch, reactive } from 'vue'

setup() {
  const state = reactive({
    name: 'John',
    age: 30
  })

  watch(() => state.age, (newVal, oldVal) => {
    console.log(`age changed from ${oldVal} to ${newVal}`)
  })
}

这段代码中，我们使用 watch 来监听 state 中 age 这个属性的变化，每当 age 发生变化时，就会触发 watch 回调函数。