Vue3 中 watchEffect 侦听器的使用方法

在 Vue3 的响应式系统中，watchEffect 是一个强大且实用的侦听器工具，它为开发者提供了一种简洁而高效的方式来响应数据的变化。

watchEffect 会立即执行传入的一个函数，并响应式追踪其依赖，当依赖发生变化时会自动重新执行该函数。简单来说，它不需要像传统的 watch 那样明确指定要监听的数据源，而是自动收集依赖。

来看一个基本的使用示例。假设我们有一个响应式数据：

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

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

const count = ref(0);

const increment = () => {
  count.value++;
};

watchEffect(() => {
  console.log(`The value of count is: ${count.value}`);
});
</script>

在这个例子中，watchEffect 包裹的回调函数会立即执行一次，打印出初始的 count 值。每当 count 的值发生变化，回调函数就会再次执行，打印出新的值。

watchEffect 还支持清除副作用函数。在回调函数中返回一个函数，这个返回的函数会在侦听器停止或依赖更新前执行，用于清理一些副作用，比如定时器或事件监听器。

<template>
  <div>
    <p>{{ message }}</p>
    <button @click="changeMessage">Change Message</button>
  </div>
</template>

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

const message = ref('Initial Message');

const changeMessage = () => {
  message.value = 'New Message';
};

watchEffect((onInvalidate) => {
  const intervalId = setInterval(() => {
    console.log('This is a side effect');
  }, 1000);

  onInvalidate(() => {
    clearInterval(intervalId);
  });
});
</script>

这里，在 watchEffect 的回调中设置了一个定时器，返回的清除函数会在 watchEffect 停止或依赖变化时清除定时器。

另外，watchEffect 也可以接收一个选项对象，其中包括 flush 和 onTrack、onTrigger 等属性。flush 选项可以控制副作用刷新的时机，有 'pre'（默认，在组件更新前触发）、'post'（在组件更新后触发）和 'sync'（同步触发） 等选项。

Vue3 的 watchEffect 侦听器极大地简化了我们处理响应式数据变化的逻辑，合理使用它可以让代码更加简洁和易于维护。无论是简单的数据监听还是复杂的副作用管理，watchEffect 都能发挥重要作用。