vue3 移除watch 监听

在 Vue3 中，`watch` 选项被移除了，取而代之的是使用 `watchEffect` 和 `watch` 函数来进行监听。

`watchEffect` 函数可以接受一个函数作为参数，当这个函数中所依赖的数据发生变化时，就会自动执行这个函数。举个例子：

import { reactive, watchEffect } from 'vue'

const state = reactive({
  count: 0
})

watchEffect(() => {
  console.log(state.count)
})

上面的代码中，我们使用 `reactive` 创建了一个响应式对象 `state`，并使用 `watchEffect` 监听了 `state.count` 的变化，当 `count` 发生变化时，就会自动执行回调函数中的代码并打印出 `count` 的值。

而 `watch` 函数则可以用来监听一个具体的数据，并在数据变化时执行回调函数。举个例子：

import { reactive, watch } from 'vue'

const state = reactive({
  count: 0
})

watch(() => state.count, (newVal, oldVal) => {
  console.log(`newVal: ${newVal}, oldVal: ${oldVal}`)
})

上面的代码中，我们使用 `reactive` 创建了一个响应式对象 `state`，并使用 `watch` 监听了 `state.count` 的变化，当 `count` 发生变化时，就会自动执行回调函数并打印出新旧值。