Vue 3 watchEffect教程

Vue 3 watchEffect教程

简介

Vue 3 引入了 Composition API，其中 watchEffect 是一个非常强大的工具，用于响应式地追踪依赖项的变化。本文将详细介绍 watchEffect 的使用方法和相关概念。

什么是 watchEffect？

watchEffect 是 Vue 3 的 Composition API 中的一个函数，用于自动追踪其回调函数中使用的响应式状态，并在状态变化时重新执行回调函数。

watchEffect的基本使用

引入 watchEffect

在组件中使用 watchEffect 之前，需要先从 Vue 中引入它：

import { watchEffect, reactive } from 'vue';

使用 watchEffect

watchEffect 接收一个回调函数作为参数，这个回调函数会被立即执行一次，并且每当其依赖的响应式状态变化时，都会重新执行。

export default {
  setup() {
    const state = reactive({
      count: 0
    });

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

    // 测试 count 的变化
    state.count++;
  }
};

在上面的例子中，count 的变化会在控制台打印出相应的值。

watchEffect的高级用法

响应特定响应式状态

watchEffect 允许你指定一个包含响应式引用的数组，来告诉 Vue 应该追踪哪些响应式状态。

export default {
  setup() {
    const state = reactive({
      count: 0,
      name: 'Vue 3'
    });

    watchEffect(() => {
      console.log(`count: ${state.count}, name: ${state.name}`);
    });

    // 只有 count 发生变化时，才会触发
    state.count++;
  }
};

执行副作用的清理

watchEffect 返回一个停止函数，可以用来停止副作用的自动重新运行，或者执行清理操作。

export default {
  setup() {
    const intervalRef = ref();

    const stop = watchEffect(() => {
      intervalRef.value = setInterval(() => {
        console.log('Interval running');
      }, 1000);
    });

    // 执行一些操作后停止 watchEffect
    setTimeout(() => {
      stop(); // 停止 watchEffect
      clearInterval(intervalRef.value); // 清理定时器
    }, 5000);
  }
};

使用 watchEffect 作为响应式引用

通过将 watchEffect 作为响应式引用，可以在其他响应式操作中使用它。

export default {
  setup() {
    const state = reactive({
      count: 0
    });

    const effect = watchEffect(() => {
      console.log(`count is now: ${state.count}`);
    });

    // 在需要的时候手动触发 effect
    state.count++;
  }
};

watchEffect与Vue 2的watch选项的区别

Vue 2 中的 watch 是一个组件选项，而 Vue 3 中的 watchEffect 是一个函数。watchEffect 提供了更灵活的副作用处理方式，并且与 Vue 3 的 Composition API 更加契合。

结语

通过本文的介绍，你应该对 Vue 3 中的 watchEffect 有了基本的了解。watchEffect 是 Vue 3 响应式系统的核心功能之一，能够极大地简化副作用的处理逻辑，提高代码的可读性和可维护性。在实际开发中，合理使用 watchEffect 将使你的 Vue 应用更加强大和灵活。