当前位置：首页 > article >正文

vue3-自动收集依赖 watchEffect

article 2025/2/9 2:32:39

在 Vue 3 中，watchEffect 是一个用于自动追踪响应式数据变化并执行副作用的 API。与 watch 不同，watchEffect 不需要手动指定要观察的数据，而是会自动根据内部访问的响应式数据进行依赖追踪。这使得 watchEffect 更加简洁和直观，适用于某些需要副作用的场景。

一、基本用法

在 Vue 3 组件中，可以直接使用 watchEffect 函数，无需额外导入。以下是一个简单的 watchEffect 示例：

<template>
  <div>
    <p>{
  
  { count }}</p>
    <button @click="increment">Increment</button>
  </div>
</template>

<script setup>
import { ref, watchEffect } from 'vue';

const count = ref(0);

// 使用 watchEffect 监听 count 的变化
watchEffect(() => {
  console.log(`count is: ${count.value}`);
});

function increment() {
  count.value++;
}
</script>

在这个示例中，watchEffect 会立即执行一次，并在 count.value 发生变化时重新执行。每次点击按钮，count 的值都会增加，并且 watchEffect 内的回调函数会被触发，输出新的 count 值。

二、自动收集依赖

watchEffect 的核心特性之一是自动收集依赖。这意味着你不需要显式地指定要监听的数据，watchEffect 会自动追踪其内部所用到的响应式数据，并在这些数据发生变化时触发回调函数。

例如，在上面的示例中，watchEffect 自动追踪了 count 的变化，而无需我们手动指定 count 作为监听对象。

三、停止与清理

在某些情况下，你可能需要停止 watchEffect 的监听。这时，你可以使用 watchEffect 的返回值来停止监听。以下是一个示例：

<script setup>
import { ref, watchEffect } from 'vue';

const count = ref(0);

// 使用 watchEffect 并获取其返回值
const stop = watchEffect(() => {
  console.log(`count is: ${count.value}`);
});

// 在需要时停止监听
// stop();
</script>

此外，watchEffect 的回调函数还可以返回一个清理函数，用于在下次执行前或停止监听时进行清理。以下是一个示例：

<script setup>
import { ref, watchEffect } from 'vue';

const count = ref(0);

watchEffect(() => {
  console.log(`count is: ${count.value}`);

  // 返回一个清理函数
  return () => {
    console.log('Cleanup logic executed');
  };
});
</script>

在这个示例中，当 watchEffect 的监听被停止时（例如，当组件被销毁时），清理函数会被执行，输出 "Cleanup logic executed"。