简介

在 Vue 的 Composition API 中，watch 和 watchEffect 是两个用于观察和响应数据变化的函数。虽然这两者有一些相似性，但它们的用途和行为有一些关键区别。

watch 的介绍与使用
使用
watch 用于观察一个或多个响应式引用或计算属性，并在它们更改时执行一个函数。

import { ref, watch } from 'vue';
// 堆代码 duidaima.com
export default {
  setup() {
    const count = ref(0);

    watch(count, (newVal, oldVal) => {
      console.log(`count changed from ${oldVal} to ${newVal}`);
    });
  }
}

选项
immediate: 是否立即执行回调函数。
deep: 是否深度观察（适用于对象或数组）。
flush: 控制回调何时执行（pre，post，sync）。

watchEffect 的介绍与使用
使用
watchEffect 用于立即执行一个函数，并响应该函数内部所依赖的所有响应式引用或计算属性。

import { ref, watchEffect } from 'vue';

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

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

主要区别与相关点
主要区别
1.自动侦测依赖 vs 显式声明: watchEffect 自动侦测函数内所用到的所有响应式引用，而 watch 需要你明确指定要观察的引用。
2.立即执行: watchEffect 创建时会立即执行一次，而 watch 默认不会，除非设置了 immediate 选项。
3.旧值与新值: watch 回调提供新值和旧值，而 watchEffect 不提供。
4.多源观察: watch 可以观察多个源，但 watchEffect 观察函数内的所有响应式引用。

相关点
1.响应性: 两者都提供强大的响应性支持。
2.生命周期: 在组件卸载时，两者都会自动停止观察。

使用场景
使用 watch:
1.当你需要访问旧值和新值。
2.当你需要基于条件观察某个值。
3.当你需要更细粒度的控制（如 deep, flush 等选项）。

使用 watchEffect:
1.当你需要依赖多个响应式引用，并希望所有这些改变都触发同一函数。
2.当你不需要旧值，只关心新值。

总结
watch 和 watchEffect 在 Vue 的 Composition API 中都是非常有用的工具，用于不同的观察和响应场景。理解它们的区别和使用场景是高效使用 Vue 的关键。如果你有任何进一步的问题或需要详细解释，随时提出。希望这篇文章能帮助你更好地理解 watch 和 watchEffect 的不同用途和行为。