vue3下的watch怎么使用

在 Vue3 中，watch 依然是非常重要的一个特性，它用于监听数据的变化并执行相应的回调函数。Vue3 的 watch 函数相比 Vue2 的 watch 选项有一些变化和改进。下面将详细介绍 Vue3 下的 watch 的使用方法和注意事项。

watch 基本用法

使用 watch 函数来监听属性变化非常简单，在 setup 函数中使用 watch 选项即可。可以参考以下示例代码：

setup() {
  const count = ref(0);
  watch(count, (newVal, oldVal) => {
    console.log(`count 变化了：${oldVal} -> ${newVal}`);
  });

  return {};
}

以上代码创建了一个名为 count 的 ref，然后使用 watch 函数监听 count 的变化。当 count 的值发生变化时，回调函数会被触发，输出 count 的新旧值。

强制 watch

在 Vue2 中，使用 immediate 选项可以使 watch 在初始渲染时立即执行回调函数。而在 Vue3 中，可以使用 immediate 选项来达到同样的效果。可以参考以下示例代码：

setup() {
  const count = ref(0);
  watch(count, (newVal, oldVal) => {
    console.log(`count 变化了：${oldVal} -> ${newVal}`);
  }, { immediate: true });

  return {};
}

以上代码在 watch 函数的第三个参数中设置了 immediate 为 true，这样在初始渲染时回调函数会被立即执行。

停止 watch

在 Vue2 中，使用 vm.$watch 方法返回一个取消观察函数来停止 watch。而在 Vue3 中，watch 函数会返回一个停止观察函数，用于停止 watch。可以参考以下示例代码：

import { watch, ref } from 'vue';

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

  const stop = watch(count, (newVal, oldVal) => {
    console.log(`count 变化了：${oldVal} -> ${newVal}`);
  });

  setTimeout(() => {
    stop(); // 停止观察
  }, 5000);

  return {};
}

以上代码中，使用 stop 函数来停止观察 count 属性的变化。在 setTimeout 中，5秒后调用 stop 函数停止 watch 的执行。

总结

总结一下，在 Vue3 中，watch 函数是用来监听数据变化并执行相应回调函数的重要特性。它的基本用法非常简单，只需要在 setup 函数中使用 watch 选项进行定义即可。通过设置 immediate 选项可以实现初始渲染时立即执行回调函数的效果。同时，watch 函数返回一个停止观察的函数，用于在需要的时候停止 watch 的执行。