vue2vue3的watch

Vue 2 和 Vue 3 对 `watch` 的处理有一些区别：

在Vue 2 中，`watch` 函数是一个响应式监听器，它会在属性变化时自动触发回调函数。Vue 2 的 `watch` 支持深度侦听，即可以监视嵌套对象的变化，并提供 `immediate` 参数来立即初始化回调（默认false）。

例如：

data() {
  return {
    count: 0,
  }
},
watch: {
  count(newVal, oldVal) {
    console.log('count changed', newVal);
  },
  'nestedObject.value'(newVal, oldVal) {
    // 深度侦听 nestedObject.value
  }
}

而在Vue 3 中，`watch` 被替换成了更简洁的 `ref.watch()` 或者 `reactive().watch()` 方法，以及 `unwatch()` 来取消监听。同时，Vue 3 引入了 `setup` 钩子，可以在其中直接通过 `useEffect` 或其他生命周期钩子来替代传统的 `watch` 逻辑。深度观察可以通过 `deep` 选项实现，但不像 Vue 2 那样默认开启。

例如：

import { ref } from 'vue';

setup() {
  const count = ref(0);

  function watchCount() {
    console.log('count changed', count.value);
  }

  useWatch(count, watchCount); // 或者在setup内部直接 useEffect

  // 你可以随时取消监听
  unwatch(watchCount);
}

Vue 3 的 `watch` 更注重易用性和可读性，同时提供了一些新的功能和灵活性，但基本原理仍然是基于响应式的变更检测。