vue3 官网没有明说的隐藏技能(一)watch与reactiv
2021-12-25 本文已影响0人
自然框架
在 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 (任意属性变化时触发),不用写成函数的形式。