Watch effect是什么

本人github

watchEffect 是 Vue 3 中的一个 Composition API 函数，用于立即运行一个函数并响应性地追踪其依赖项。当依赖项（响应式引用或计算属性）发生变化时，该函数会自动重新运行。

这与 Vue 2 中的 watch 有些不同，因为 watch 通常用于观察单个响应式属性或计算属性，而 watchEffect 可以自动追踪多个响应式依赖。

基本用法

import {
    
     ref, watchEffect } from 'vue';

export default {
    
    
  setup() {
    
    
    const count = ref(0);
    const doubled = ref(0);

    watchEffect(() => {
    
    
      console.log(`count is: ${
      
      count.value}`);  // 自动追踪 count
      doubled.value = count.value * 2;  // 自动追踪 doubled
    });

    return {
    
    
      count,
      doubled
    };
  }
}

在这个例子中，watchEffect 会立即运行一次，并且每当 count 或 doubled 发生变化时都会重新运行。

停止观察

watchEffect 返回一个停止观察的函数，你可以调用这个函数来停止观察：

const stopWatch = watchEffect(() => {
    
    
  // 你的代码
});

// 停止观察
stopWatch();

与 watch 的比较

• watchEffect 更为自动和便捷，因为它会自动追踪所有响应式依赖。
• watch 更为灵活，因为它允许你观察单个响应式引用或计算属性，并提供旧值和新值。

选择哪一个取决于你的具体需求。如果你需要更多的控制和灵活性，可能会选择 watch。如果你想要一个更简单和自动的解决方案，watchEffect 可能更适合你。