zoukankan      html  css  js  c++  java
  • <转> vue watch对象内的属性监听(备忘)

    https://www.jianshu.com/p/9ada0b5f04d5?utm_campaign

    vue可以通过watch监听data内数据的变化。通常写法是:

    new Vue({
      data: {
        a: 100,
        msg:{
            channel:'音乐',
            style:'活泼'
        }
      },
      watch: {
        a: function (newval, oldVal) {
          console.log('new: %s, old: %s', newval, oldVal)
        }
      }
    })
    

      

    但是如果你要监听的数据是对象内的某一属性,直接watch对象的属性(eg:msg.channel)就会报错

    而监听整个对象的时候(eg:msg)会发现无论何时newval和oldVal的值都是一样的,这是因为msg这个对象的指向并没有发生改变,所以需要深度监测

    watch: {
        msg: {
            handler(newValue, oldValue) {
                console.log(newValue)
            },
            deep: true
        }
    }

    如果监听对象内的某一具体属性,可以通过computed做中间层来实现

    computed: {
        channel() {
            return this.msg.channel
        }
    },
    watch:{
        channel(newValue, oldValue) {
            console.log('new: %s, old: %s', newval, oldVal)
            //这里面可以执行一旦监听的值发生变化你想做的操作
        }
    }

    尊重版权哦!

    作者:形影相随_371e
    链接:https://www.jianshu.com/p/9ada0b5f04d5
    来源:简书
    简书著作权归作者所有,任何形式的转载都请联系作者获得授权并注明出处。
  • 相关阅读:
    数据库连接单例模式
    魔术方法
    序列化与反序列化
    设计模式
    类的自动加载
    错误处理
    匿名类--php7.0以上
    OpenCV中HSV颜色模型及颜色分量范围
    Opencv 轮廓提取
    opencv 二值化_OpenCV二值图像案例分析精选 | 第二期
  • 原文地址:https://www.cnblogs.com/lml2017/p/10870324.html
Copyright © 2011-2022 走看看