微客导航 » 文章资讯 » 解决Vue2.0 watch对象属性变化监听不到的问题

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

2023-09-08 07:08:04 377

问题

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

解决

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

请参照https://v1-cn.vuejs.org/guide/reactivity.html

解决方式：

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

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

代码实例

总结

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

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