vue3详解-watch与watchEffect的区别

前言

这次我来介绍一下vue3中的watch与watchEffect的区别，他们最大的区别是什么呢，没错，watchEffect比watch多6个字母。

开个玩笑，接下来将由我来为大家详细介绍一下他们的区别，watch 和 watchEffect 都是 Vue 3 Composition API 中用于响应式地观察和响应数据变化的函数，但它们在使用方式和行为上存在一些关键的区别。

watch

watch 函数允许你显式地指定要观察的数据源和相应的回调函数。你可以观察一个或多个响应式引用（ref）或计算属性（computed），并在它们变化时执行回调函数。

import { ref, watch } from 'vue';  
  
const count = ref(0);  
  
watch(count, (newValue, oldValue) => {  
  console.log(`Count changed from ${oldValue} to ${newValue}`);  
});  
  
// 也可以同时观察多个源  
watch([count, anotherRef], ([newCount, newAnother], [oldCount, oldAnother]) => {  
  // ...  
});

特点：

• 你可以选择性地观察特定的响应式数据。
• 回调函数接收新值和旧值作为参数，方便你比较变化。
• watch 是惰性的，意味着它只会在数据源首次被观察时执行回调，之后只会在数据源变化时执行。
• 你可以指定 deep 选项来深度观察对象的变化。
• 你可以指定 immediate 选项来在观察开始时立即执行回调函数。

watchEffect

watchEffect 函数会自动收集依赖，并在依赖发生变化时重新运行函数。你不需要显式指定要观察的数据源，watchEffect 会自动追踪函数内部使用的响应式数据。

import { ref, watchEffect } from 'vue';  
  
const count = ref(0);  
const anotherCount = ref(0);  
  
watchEffect(() => {  
  console.log(`Count is ${count.value}, anotherCount is ${anotherCount.value}`);  
});  
  
// 当 count 或 anotherCount 任何一个变化时，上面的函数都会重新运行

特点：

• watchEffect 会自动收集函数内部使用的响应式数据作为依赖。
• 当依赖变化时，函数会自动重新运行。
• 回调函数不接收新值和旧值作为参数，因为watchEffect不关注具体的值变化，而是重新运行函数以反映最新的状态。
• watchEffect 是立即执行的，它会在创建时立即运行一次回调函数，并收集初始的依赖。
• 由于它自动收集依赖，所以不适合用于需要精确控制依赖的场景。

区别总结

1、显式与隐式：watch 需要你显式指定要观察的数据源，而 watchEffect 则隐式地收集函数中的依赖。
2、参数传递：watch 的回调函数接收新值和旧值作为参数，而 watchEffect 的回调函数不接收这些参数。
3、执行时机：watch 是惰性的，除非指定了 immediate 选项，否则不会立即执行回调。watchEffect 则是立即执行的，创建时就会运行一次回调函数。
4、控制粒度：watch 允许你精确控制要观察哪些数据源，而 watchEffect 则更侧重于自动收集依赖，并在依赖变化时重新运行函数。
5、深度观察：使用 watch 时，如果需要深度观察对象的变化，需要显式设置 deep: true。而 watchEffect 会自动处理深度观察。

结语

在实际应用中，你可以根据具体需求选择使用 watch 还是 watchEffect。如果你需要精确控制观察哪些数据源，或者需要比较新旧值，那么 watch 可能更适合你。而如果你只是想在依赖变化时重新运行某个函数，并且不关心具体的值变化，那么 watchEffect 可能是一个更简洁的选择。