Vue 中用 watchEffect 监听响应式数据更新 DOM 的方法

在 Vue 开发中，实现数据与 DOM 的双向绑定是一项核心任务。而 watchEffect 作为 Vue 提供的强大响应式 API，为我们监听响应式数据并及时更新 DOM 提供了便捷途径。

了解一下 watchEffect 的基本概念。watchEffect 是一个副作用函数，它会自动追踪其依赖的响应式数据。一旦这些依赖数据发生变化，watchEffect 所包裹的函数就会重新执行，这使得它非常适合用于根据数据变化来更新 DOM。

在实际应用中，我们可以这样使用 watchEffect。假设我们有一个简单的 Vue 组件，其中包含一个响应式数据变量 message，并且我们希望在 message 变化时更新 DOM 中的某个元素的文本内容。

<template>
  <div>
    <p id="message">{{ message }}</p>
    <button @click="updateMessage">更新消息</button>
  </div>
</template>

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

const message = ref('初始消息');

const updateMessage = () => {
  message.value = '新的消息';
};

watchEffect(() => {
  const messageElement = document.getElementById('message');
  if (messageElement) {
    messageElement.textContent = message.value;
  }
});
</script>

在这个示例中，watchEffect 会自动追踪 message 的变化。当我们点击按钮触发 updateMessage 方法，message 的值发生改变时，watchEffect 内部的函数会重新执行，从而更新 DOM 中 id 为 message 的 p 元素的文本内容。

值得注意的是，watchEffect 会立即执行一次，以收集其依赖。这意味着即使数据在初始阶段没有发生变化，它也会执行一次来设置初始的 DOM 状态。

另外，在清理副作用方面，watchEffect 也提供了便利。如果我们在副作用函数中进行了一些需要清理的操作，比如创建了一个定时器或者订阅了一个事件，我们可以在副作用函数内部返回一个清理函数。这个清理函数会在 watchEffect 停止追踪或者依赖项变化重新执行副作用函数之前执行。

通过合理运用 watchEffect，我们能够更加高效、简洁地实现响应式数据与 DOM 的同步更新，提升 Vue 应用的开发效率与质量。