vue3: watch VS watchEffect

区别

可以理解为同一个功能的两种不同形态

• watch 只追踪明确的数据源。仅在数据源确实改变时才会触发回调。
• watchEffect 自动追踪回调函数中能访问到的响应式属性。回调函数中任何用到的响应式数据更新时，该回调函数便会重新执行。缺点：其响应性依赖关系会不那么明确

watch 写法：

const x = ref(0)

watch(x, (newX) => {
  console.log(`x is ${newX}`)
})

watchEffect 写法：

watchEffect(
  () => console.log(counter.value)
)

回调的触发时机

当你更改了响应式状态，它可能会同时触发 Vue 组件更新和侦听器回调。

默认情况下，用户创建的侦听器回调，都会在 Vue 组件更新之前被调用。这意味着你在侦听器回调中访问的 DOM 将是被 Vue 更新之前的状态。

如果想在侦听器回调中能访问被 Vue 更新之后的 DOM，你需要指明 flush: ‘post’ 选项：

watch(source, callback, {
  flush: 'post'
})

watchEffect(callback, {
  flush: 'post'
})

后置刷新的 watchEffect() 有个更方便的别名 watchPostEffect()：

import { watchPostEffect } from 'vue'

watchPostEffect(() => {
  /* 在 Vue 更新后执行 */
})