Vue3(八)用watch监听对象任意属性的变化(含嵌套属性)

简介: 网上关于watch的介绍有很多,但是一般都是按照官网的套路来介绍,比如监听一个属性,监听多个属性等等。

网上关于watch的介绍有很多,但是一般都是按照官网的套路来介绍,比如监听一个属性,监听多个属性等等。


但是监听对象的任意属性呢?还有嵌套属性怎么办?


找了一下没找到,也许这个问题比较基础吧,都不需要介绍的。 然后自己犯傻开始开脑洞,结果浪费时间了不是。


其实想一想,这种麻烦事,vue怎么可能交给别人来处理呢?内部肯定有方法解决嘛。


突然想到,为啥不到群里问问。


于是得到回答,你可以用deep呀。


deep是啥,好吧是深度的意思,那么怎么用?


回答说,让我看官网……


官网好像没有呀。等等,猜猜我在最后一行看到了啥。


// 参见 `watchEffect` 类型声明共享选项
interface WatchOptions extends WatchEffectOptions {
  immediate?: boolean // default: false
  deep?: boolean
}
复制代码


啥也不说了,只能怪自己看官网不认真。


尝试一下



// 监听对象
    watch(() =>  personReactive, (v1,v2) => {
      console.log('改变了', v1)
    },
    {
      deep:true // 深度监听的参数
    })
    // 修改属性的测试
    const update = () => {
      personReactive.name = '改变' + Math.random()
      personReactive.contacts.QQ = Math.random()
    }
复制代码


直接写对象,不用写属性。任意属性(包括嵌套属性)变化的时候都会触发,只是两个参数都是新值(整个对象),没有旧值了。


加个参数就可以搞定了。



相关文章
|
2天前
|
JavaScript
vue中watch的用法
vue中watch的用法
|
1天前
|
JavaScript API
vue学习(13)监视属性
vue学习(13)监视属性
10 2
|
1天前
|
JavaScript 前端开发
vue学习(15)watch和computed
vue学习(15)watch和computed
9 1
|
9天前
|
JavaScript 开发者
彻底搞懂 Vue3 中 watch 和 watchEffect是用法
彻底搞懂 Vue3 中 watch 和 watchEffect是用法
|
7天前
|
缓存 JavaScript
vue学习(12)计算属性
vue学习(12)计算属性
15 3
|
7天前
|
缓存 JavaScript
vue学习(12)计算属性
vue学习(12)计算属性
22 2
|
JavaScript 前端开发
vue通过监听实现相同路径的视图重新加载
最近在做一个项目,前端菜单路径如下: { path: '/oa/workflow/process/:status', component: sys_workflow_process, ...
1247 0
|
2天前
|
JavaScript 前端开发
vue动态添加style样式
vue动态添加style样式
|
2天前
|
JavaScript 前端开发
Vue项目使用px2rem
Vue项目使用px2rem
|
1天前
|
JavaScript
vue 函数化组件
vue 函数化组件