【Vue3】回顾watch，学习watchEffect

在Vue 3中，watch用于观察响应式数据源，并在数据源变化时执行特定的回调函数。而watchEffect则是用来执行一段响应式依赖发生变化时重新运行的函数，它不关心监控的具体数据源，更多地关注于响应式依赖的变化。

watch

import { ref, watch } from 'vue'
 
const state = ref(0)
 
watch(state, (newVal, oldVal) => {
  console.log(`state changed from ${oldVal} to ${newVal}`)
})
 
// 你可以监控多个源，或使用深度监控
watch([state, () => myOtherReactiveDependency], 
  ([newState, newDep], [oldState, oldDep]) => {
    console.log(`state: ${newState}, otherDep: ${newDep}`)
})

watchEffect

import { ref, watchEffect } from 'vue'
 
const state = ref(0)
 
watchEffect(() => {
  console.log('state changed, new value is:', state.value)
})
 
// 你可以在响应式依赖变化时执行异步或有副作用的操作
watchEffect(async (onInvalidate) => {
  const token = fetchSomeAsyncOperation()
  onInvalidate(() => token.cancel())
})

watch更加明确指定了监控的数据源，而watchEffect则是在没有明确指定数据源的情况下，当其依赖发生变化时自动执行一段响应式代码。