Vue3中watch和watchEffect区别

最新推荐文章于 2024-04-09 01:31:10 发布

祁祁私语

最新推荐文章于 2024-04-09 01:31:10 发布

阅读量1.4k

点赞数

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/weixin_57909742/article/details/133779422

版权

在Vue 3中，watch和watchEffect是用于响应式监听数据变化的两个函数。它们的主要区别在于：

watch需要明确指定要监视的数据源，而watchEffect则可以自动收集其使用的响应式数据，因此代码会更简洁，但是，它的回调函数无法获得旧值和新值的参数。
watch在监听对象或数组时，需要开启deep选项才能深度监听其属性或元素的变化。而watchEffect会自动追踪响应式数据的依赖，并在赋值、方法调用等操作后重新执行回调函数。

举个例子，假设我们有一个count变量和一个list数组。我们想在它们的值发生变化时执行某些操作。使用watch的代码如下：

watch(
  [() => count, () => list],
  ([newCount, newList], [oldCount, oldList]) => {
    // 执行某些操作
  },
  {deep: true}
);

watch需要明确指定要监测的数据源，并且需要开启deep选项以监测对象或数组的深层属性/元素。它的回调函数接受新旧值的参数。

使用watchEffect的代码如下：

watchEffect(() => {
  // 执行某些操作，这里可以直接访问到count和list
});

watchEffect会自动追踪回调函数中使用到的响应式数据的依赖，并在其发生变化时重新执行回调函数。因此，我们可以将操作直接放在回调函数中，而不需要指定要监测的数据源。但是，它的回调函数无法获得旧值和新值的参数。

总之，watch和watchEffect都是用于监听数据变化的重要函数。你可以根据具体情况选择使用哪个函数。如果需要明确指定要监测的数据源，或需要访问新旧值的参数，则应该使用watch；如果希望代码更简洁，并且不需要获得新旧值的参数，则应该使用watchEffect。

关注