Vue：watchEffect的作用与性质

目录

一.watchEffect的作用

二.watchEffect的性质

三. `watch`对比`watchEffect`

四.watchEffect的使用

在 Vue 中，watchEffect 是一个用于副作用处理的函数，它是 Vue 3 Composition API 的一部分。它的主要作用是自动追踪其内部依赖的响应式状态，并在依赖发生变化时重新执行。立即运行一个函数，同时响应式地追踪其依赖，并在依赖更改时重新执行该函数。

一.watchEffect的作用

• 自动收集依赖：watchEffect 会自动收集其内部使用的所有响应式状态，并在这些状态变化时重新执行。
• 执行副作用：它允许你执行一些依赖于响应式状态的副作用，比如数据请求、计算或 DOM 操作。
• 性能优化：由于 watchEffect 会智能地追踪依赖，因此它只会在其依赖发生变化时才执行，这有助于避免不必要的计算和性能损耗。

二.watchEffect的性质

1. 自动依赖追踪：当你在 watchEffect 中访问响应式状态时，Vue 会自动将这些状态标记为依赖，并在状态变化时重新执行 watchEffect。

2. 立即执行：watchEffect 在被调用时会立即执行一次，并追踪其内部依赖。

3. 返回停止函数：watchEffect 返回一个函数，该函数可以用来停止 watchEffect 的执行。调用这个返回的函数可以停止追踪依赖和执行副作用。

4. 响应式更新：当 watchEffect 中的响应式状态发生变化时，Vue 会自动更新 DOM。

三. `watch`对比`watchEffect`

四.watchEffect的使用

<template>
  <div>
    <p>{{ message }}</p>
    <p>{{ count }}</p>
  </div>
</template>

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

export default {
  setup() {
    const message = ref('Hello');
    const count = ref(0);

    // watchEffect 将立即执行一次，并在依赖项变化时重新运行
    watchEffect(() => {
      console.log(`count is: ${count.value}`);
      // 这里可以执行一些副作用，例如更新 DOM 或发送请求
    });

    // 停止 watchEffect
    const stopWatch = watchEffect(() => {
      console.log(`count is: ${count.value}`);
    });

    // 当你想要停止监听时，可以调用这个函数
    // stopWatch();

    return {
      message,
      count
    };
  }
};
</script>