美文网首页
vue监听对象的方法

vue监听对象的方法

作者: 王玉伟的伟 | 来源:发表于2019-11-26 15:29 被阅读0次
只监听对象某个属性变化的优化。

deep的意思就是深入观察,监听器会一层层的往下遍历,给对象的所有属性都加上这个监听器,但是这样性能开销就会非常大了,任何修改obj里面任何一个属性都会触发这个监听器里的 handler。

但是在实际开发过程中,我们很可能只需要监听obj中的某几个属性,这样设置deep:true之后就显得很浪费!
于是我们可以使用字符串形式来优化监听。
前面obj的监听可以去掉了!

watch: {
    'obj.age': {
      handler (newValue, oldValue) {
        console.log('王明的年龄更新了新值是' + newValue + ',旧值是' + oldValue)
      },
      immediate: true
    },
    'obj.brother.age': {
      handler (newValue, oldValue) {
        console.log('王刚的年龄更新了新值是' + newValue + ',旧值是' + oldValue)
      },
      immediate: true
    },
  }


相关文章

  • Vue 监听不到属性变化

    1、通过vue的this.$set(object,key,value)方法,这种只能监听到新增对象,如果更新对象,...

  • vue监听对象的方法

    只监听对象某个属性变化的优化。 deep的意思就是深入观察,监听器会一层层的往下遍历,给对象的所有属性都加上这个监...

  • vue中的变化检测问题

    从vue通过Object.defineProperty方法劫持数据可知,vue是监听不到对象属性的增加或删除的,因...

  • Vue watch

    Vue中监听某个对象的属性 为了避免监听整个对象导致效率问题,可以监听某个对象的特定属性

  • vue实现监听多维数组和深度监听对象的方式

    使用vue的过程中,如果数组或对象发生了变化,vue是监听不到的,这里总结下对多维数组和多层对象的监听。 监听多维...

  • 动态数据绑定(一)

    动态数据绑定(一) vue早期源码学习系列之一:如何监听一个对象的变化 方法一

  • 动态数据绑定(二)

    动态数据绑定(一) vue早期源码学习系列之一:如何监听一个对象的变化 方法一

  • Vue3之Proxy和Object.defineProperty

    1.Proxy可以监听数组所有方法,vue2则重写了数组的7种方法 2.Proxy能够直接监听对象的增加及删除 3...

  • 微信小程序之watch属性值(仿Vue)

    Vue通过监听watch属性来观测Vue实例数据的变化。 监听器的原理,将data中需监听的属性写在watch对象...

  • vue 遇到的坑

    一、watch监听数据 1、监听普通的变量 1、vue.js里面直接用watch监听对象变量,如果对象变量的属性发...

网友评论

      本文标题:vue监听对象的方法

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