美文网首页Vue.jsVue.js开发技巧前端开发那些事儿
Vue3(八)用watch监听对象任意属性的变化(含嵌套属性)

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

作者: 自然框架 | 来源:发表于2021-03-08 10:08 被阅读0次

    网上关于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()
        }
    

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

    加个参数就可以搞定了。

    相关文章

      网友评论

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

        本文链接:https://www.haomeiwen.com/subject/uaqpqltx.html