区别
可以理解为同一个功能的两种不同形态
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 更新后执行 */
})