前端开发那些事儿前端框架每天学一点Vue3

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 (任意属性变化时触发),不用写成函数的形式。

上一篇下一篇

猜你喜欢

热点阅读