解决Vue2.0 watch对象属性变化监听不到的问题

前端之家收集整理的这篇文章主要介绍了解决Vue2.0 watch对象属性变化监听不到的问题前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

问题

很早之前就遇到一个问题,父组件向子组件传值,子组件监听传入对象的某个属性。发现子组件使用deep watch都不能观察到对象中属性的变化,今天终于找到为啥出现这种问题和解决办法了。

解决

为啥出现这种问题?受 ES5 的限制,Vue.js 不能检测到对象属性添加删除

请参照

解决方式:

通过vue的this.$set(object,key,value)方法

通过object.assign()重新创建一个对象,例如this.someObject = Object.assign({},this.someObject,{ a: 1,b: 2 })

代码实例

总结

个人推荐使用第二种解决方式,代码写起来更优雅。第一种解决方式如果有多个值会出现,多行$set()语句。

以上这篇解决Vue2.0 watch对象属性变化监听不到的问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持编程之家。

猜你在找的Vue相关文章