Vue3 中 watch 与 watchEffect 区别及用法小结

const ref = (initialValue) => {  let _value = initialValue  return {    get value() {
     track(this, 'value') // 收集依赖
     return _value
   },    set value() {
     _value = value
     trigger(this, 'value') // 触发依赖
   }
 }
}

const counter = ref(1)
console.log(counter.value) // `track()` 被呼叫
counter.value = 2 // `trigger()` 被呼叫

const counter = ref(1)function foo() {  console.log(counter.value)
}function collectDeps() {
 startTracking()
 foo() // 在这个过程中，counter 被收集
 stopTracking()
}

watch(
 () => { /* 依赖源收集函数 */ },
 () => { /* 依赖源改变时的回调函数 */ }
)

watchEffect(
 () => { /* 依赖源同时是回调函数 */ }
)

watchEffect(  () => console.log(counter.value)
)
watch(  () => counter.value,  () => console.log(counter.value),
 { immediate: true }
)

const counter = ref(0)const enabled = ref(false)
watchEffect(() => {  if (enabled.value)
   console.log(counter.value)
})// (以下忽略 nextTick)// watchEffect 会被立即执行，因为 “enabled“ 为 false, 此时仅收集到 “enabled“ 依赖counter.value += 1 // 无反应enabled.value = true // Effect 触发，控制台出 "1"counter.value += 1 // “counter“ 被作为新的依赖被收集，控制台出 "2"enabled.value = false // 函数被重新执行，无输出counter.value += 1 // 函数被重新执行，无输出 (虽然 counter 已经没有用了，但是作为依赖还是会触发函数）