在 vue3里面,reactive、watch等都属于基础用法,官网也给出实例,比如这样:
// 侦听一个 getter const state = reactive({ count: 0 }) watch( () => state.count, (count, prevCount) => { /* ... */ } ) // 直接侦听一个 ref const count = ref(0) watch(count, (count, prevCount) => { /* ... */ }) // 监听多个源 watch([fooRef, barRef], ([foo, bar], [prevFoo, prevBar]) => { /* ... */ })
如果想监听 reactive 任意一个属性的变化,按照官网要这么写:
const state = reactive({ count: 0 }) watch( () => state, (state1 , state2 ) => { /* 没有新旧值之分,两个参数都是一样的。 */ }, { deep: true } )
既然 ref 可以直接监听,那么没理由 reactive 必须写成回调函数的形式。
可能也许是某些原因吧,总之,介绍的不全。当然如果官网介绍了,只是我眼大漏神没有看到的话,还望大家多多指教。
其实,翻一翻源码可以发现,我们可以简化一下写法:
const state = reactive({ count: 0 }) watch( state, () => { state... } )
也就是说 watch 可以直接监听 reactive (任意属性变化时触发),不用写成函数的形式。