vue3中使用watch监听

在Vue 3中，`watch` 是一种响应式的数据观测机制，它允许你在数据变化时执行自定义的函数。与之前的版本相比，Vue 3引入了更简洁的 API，并将 `watch` 功能重构为了 `setup` 函数中的 `watchEffect`。

`watch` 的基本语法如下：

import { watch } from 'vue'

export default {
  setup() {
    // 监听 data 中的某个属性 changes
    const currentValue = ref(0);
    let called = false;

    // 使用 watch 创建回调函数
    watch(currentValue, (newVal) => {
      if (!called) {
        console.log('值改变了:', newVal)
        called = true;
      }
    }, {
      immediate: true, // 马上执行一次，而不是等到第一次改变发生后再执行
      deep: true, // 是否深度监听嵌套的对象或数组
      handler: (newVal, oldVal) => {/* 新旧值处理 */}
    });

    return {
      currentValue,
    };
  },
}

在 `setup` 函数中，你可以使用 `watchEffect` 替换 `watch`，这提供了更多的控制选项，如立即执行、延迟执行等。记得在完成监听后，确保在组件卸载前取消订阅以避免内存泄漏。