vue3源码解析——watch和watchEffect区别

Vue 3 引入了 Composition API，其中包括 watch 和 watchEffect 函数。这两个函数用于响应式地跟踪响应式数据的变化并执行特定的操作。

1. watch：

watch 用于观察单个响应式引用或响应式对象的属性，当被观察的源发生变化时，它会执行一个回调函数。

import { watch } from 'vue';
 
setup() {
  const state = reactive({ count: 0 });
 
  watch(() => state.count, (newValue, oldValue) => {
    console.log(`The new count is ${newValue}, old count was ${oldValue}`);
  });
 
  return { state };
}

2. watchEffect：

watchEffect 用于自动追踪其依赖的响应式引用，并在这些依赖发生变化时执行一段副作用代码。它不需要指定观察的特定数据源，而是在回调函数内部访问这些依赖。

import { watchEffect } from 'vue';
 
setup() {
  const state = reactive({ count: 0 });
 
  watchEffect(() => {
    console.log(`The count is now ${state.count}`);
  });
 
  return { state };
}

watch 更像是定义了要观察的具体数据源，而 watchEffect 则更倾向于定义一个无batching的副作用函数。

注意：在实际使用中，watch 和 watchEffect 可以根据需要选择使用，它们各有优势，但也各自有适用的场景。