解决Vue2.0 watch对象属性变化监听不到的问题
更新时间：2018年09月11日 10:03:30 作者：HiZhg
今天小编就为大家分享一篇解决Vue2.0 watch对象属性变化监听不到的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
问题
很早之前就遇到一个问题，父组件向子组件传值，子组件监听传入对象的某个属性。发现子组件使用deep watch都不能观察到对象中属性的变化，今天终于找到为啥出现这种问题和解决办法了。
解决
为啥出现这种问题？受 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 })
代码实例
<template>
<div>
<p @click="fun1" style="color: blue">方式一</p>
<p @click="fun2" style="color: blue">方式二</p>
</div>
</template>
<script>
export default {
data () {
return {
p: {a: 1}
}
},
methods: {
fun1 () {
console.log('click 1111')
// this.p.b = 2 // 通过点方法赋值，发现观察不到p的变化
this.$set(this.p, 'b', 2) // 第一种解决方式，可以查看日志看到已经监听到了变化
},
fun2 () {
console.log('click 2222')
this.p = Object.assign({}, this.p, {c: 3})
}
},
watch: {
p: {
handler (cval, oval) {
console.log('--------')
console.log(cval, oval)
},
deep: true
}
}
}
</script>
<style>
</style>
总结
个人推荐使用第二种解决方式，代码写起来更优雅。第一种解决方式如果有多个值会出现，多行$set()语句。
以上这篇解决Vue2.0 watch对象属性变化监听不到的问题就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了Vue 计数器的实现，主要利用HTML实现步骤现在页面上简单实现一个计数器，内容简单且详细,需要的朋友可以参考一下2021-10-10
这篇文章主要介绍了Vue组件更新数据v-model不生效的解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-04-04
这篇文章主要介绍了使用Element实现表格表头添加搜索图标和功能，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-07-07
element ui富文本编辑器的使用效果与步骤(quill-editor)
富文本编辑器在任何项目中都会用到,在Element中我们推荐vue-quill-editor组件,下面这篇文章主要给大家介绍了关于element ui富文本编辑器的使用效果与步骤(quill-editor)的相关资料,需要的朋友可以参考下2022-10-10
Vue组件传值方式(props属性,父到子,子到父,兄弟传值)
这篇文章主要介绍了Vue组件传值方式(props属性,父到子,子到父,兄弟传值),具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-06-06
本篇文章主要介绍了如何解决vue与传统jquery插件冲突，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-03-03
这篇文章主要介绍了vue与django集成打包的实现方法,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-11-11
这篇文章主要介绍了vue与iframe之间的交互方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-09-09
这篇文章主要介绍了vue cli4环境变量和模式示例详解，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-04-04
vue canvas绘制矩形并解决由clearRec带来的闪屏问题
这篇文章主要介绍了vue canvas绘制矩形并解决由clearRec带来的闪屏问题,本文给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下2019-09-09
最新评论