Vue中如何监控某个属性值的变化?


Vue中如何监控某个属性值的变化?

比如现在需要监控data中,obj.a 的变化。Vue中监控对象属性的变化你可以这样:

watch: {
      obj: {
      handler (newValue, oldValue) {
        console.log('obj changed')
      },
      deep: true
    }
  }

deep属性表示深层遍历,但是这么写会监控obj的所有属性变化,并不是我们想要的效果,所以做点修改:

watch: {
   'obj.a': {
      handler (newName, oldName) {
        console.log('obj.a changed')
      }
   }
  }

还有一种方法,可以通过computed 来实现,只需要:

computed: {
    a1 () {
      return this.obj.a
    }
}

利用计算属性的特性来实现,当依赖改变时,便会重新计算一个新值。


文章作者: 曹豆芽
版权声明: 本博客所有文章除特別声明外,均采用 CC BY 4.0 许可协议。转载请注明来源 曹豆芽 !
 上一篇
vue3.0与vue2.x不同,你可以知道 vue3.0与vue2.x不同,你可以知道
vue3.0与vue2.x不同,你可以知道小编最近在用vue3.0去写项目,也总结了一些关于vue2.x和vue3.0的一些区别 vue3.0对vue的主要3个特点:响应式、模板、对象式的组件声明方式,进行了全面的更改,底层的实现和上层的a
2020-04-05
下一篇 
Vue与Angular以及React的区别? Vue与Angular以及React的区别?
Vue与Angular以及React的区别?1.与AngularJS的区别相同点:都支持指令:内置指令和自定义指令;都支持过滤器:内置过滤器和自定义过滤器;都支持双向数据绑定;都不支持低端浏览器。 不同点:AngularJS的学习成本高,比
2020-03-30
  目录