vue3 官网没有明说的隐藏技能(一)watch与reactive

简介: 在 vue3里面,reactive、watch等都属于基础用法。

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


相关文章
|
2天前
|
JavaScript
vue中watch的用法
vue中watch的用法
|
1天前
|
存储 API
vue3中如何动态自定义创建组件并挂载
vue3中如何动态自定义创建组件并挂载
|
1天前
|
JavaScript 前端开发
vue学习(15)watch和computed
vue学习(15)watch和computed
9 1
|
6天前
|
JavaScript 调度
Vue3 使用 Event Bus
Vue3 使用 Event Bus
11 1
|
6天前
|
JavaScript
Vue3 : ref 与 reactive
Vue3 : ref 与 reactive
9 1
|
6天前
Vue3 使用mapState
Vue3 使用mapState
10 0
|
2天前
|
JavaScript 前端开发
vue动态添加style样式
vue动态添加style样式
|
2天前
|
JavaScript 前端开发
Vue项目使用px2rem
Vue项目使用px2rem
|
1天前
|
JavaScript API
vue学习(13)监视属性
vue学习(13)监视属性
10 2
|
1天前
|
JavaScript
vue 函数化组件
vue 函数化组件