正文

Vue3中watchEffect如何自动追踪依赖，实现实时更新

/0 浏览量
0514

在Vue3中，watchEffect 是一个强大的响应式系统特性，它允许我们观察和自动追踪依赖，当依赖的响应式状态发生变化时，会自动执行回调函数。以下是如何使用 watchEffect 实现实时更新的详细说明。

简介

watchEffect 接收一个回调函数作为参数，这个回调函数中用到的响应式状态变化时，watchEffect 会自动重新执行这个回调函数。Vue3 的响应式系统会追踪这个回调函数中的依赖，并在依赖变化时更新视图。

基本用法

下面是一个使用 watchEffect 的基本示例：

import { reactive, watchEffect } from 'vue';

// 创建一个响应式对象
const state = reactive({
  count: 0
});

// 定义一个副作用，它会自动追踪依赖
watchEffect(() => {
  console.log(`当前计数：${state.count}`);
});

// 改变 count 的值会触发副作用
state.count++;

在这个例子中，每次 state.count 的值改变时，控制台都会打印出新的计数值。

自动追踪依赖

Vue3 的响应式系统是如何自动追踪依赖的呢？以下是内部原理的简单解释：

  1. 当 watchEffect 执行回调函数时，它会进入一个“追踪依赖”模式。
  2. 回调函数中用到的任何响应式状态都会被记录下来，成为这个回调的依赖。
  3. 当这些依赖的状态发生变化时，Vue3 的响应式系统会重新执行这个回调函数。

这就是为什么在上面的例子中，当 state.count 的值变化时，watchEffect 会自动打印出新的计数值。

深度追踪依赖

watchEffect 还支持深度追踪依赖。如果依赖的是一个对象，并且我们希望Vue3能够追踪该对象内部嵌套属性的变动，可以使用 watchEffect 的第二个参数来设置 deep 为 true：

import { reactive, watchEffect } from 'vue';

// 创建一个响应式对象
const state = reactive({
  person: {
    name: '张三',
    age: 25
  }
});

// 深度追踪对象内部的依赖
watchEffect((onInvalidate) => {
  console.log(`姓名：${state.person.name}`);
  onInvalidate(() => {
    console.log('watchEffect 被取消');
  });
}, { deep: true });

// 改变 person 的值会触发深度追踪
state.person.name = '李四';

在这个例子中，state.person.name 的值改变时，watchEffect 会自动打印出新的姓名。

总结

watchEffect 是Vue3中一个非常有用的功能，它可以自动追踪依赖并实现实时更新。通过理解其工作原理，我们可以更好地利用这个功能来提高应用性能和用户体验。

-- 展开阅读全文 --