vue3 watchEffect 的用法

watchEffect 是 Vue 3 中用于监听响应式数据变化并执行副作用函数的函数。它的使用方式和作用如下：

1. 基本用法：

   javascript

   插入代码复制代码

   import { ref, watchEffect } from 'vue'; const myData = ref(0); watchEffect(() => { console.log('myData has changed:', myData.value); });

   在这个例子中，我们首先引入 ref 和 watchEffect，创建了一个名为 myData 的响应式数据，并使用 watchEffect 监听它的变化。当 myData 发生变化时，传入的函数（这里是一个箭头函数）会被执行，从而打印出变化后的值。

2. 副作用函数：

   watchEffect 的参数是一个函数，这个函数被称为副作用函数。副作用函数通常包含了需要在响应式数据变化时执行的代码逻辑。

3. 自动追踪依赖：

   watchEffect 会自动追踪副作用函数中使用的响应式数据，因此无需手动指定依赖，它们会在变化时自动触发函数执行。

4. 异步执行：

   watchEffect 会在初始化时执行一次副作用函数，然后在其依赖的响应式数据变化时再次执行。这使得它非常适合处理异步操作，如发起网络请求。

5. 返回值：

   watchEffect 函数本身没有返回值。

6. 停止监听：

   watchEffect 返回一个停止监听的函数，你可以调用它来停止对响应式数据的监听：

   javascript

   插入代码复制代码

   const stop = watchEffect(() => { // 副作用函数的逻辑 }); // 在某个时刻停止监听 stop();

总之，watchEffect 是 Vue 3 中用于执行副作用函数并自动追踪依赖的强大工具，它使得在处理响应式数据变化时更加方便和灵活。

watchEffect 特点

• 非惰性：一旦运行就会立即执行；
• 更加抽象：使用时不需要具体指定监听的谁，回调函数内直接使用就可以；
• 不可访问之前的值：只能访问当前最新的值，访问不到修改之前的值；