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

问题
在项目中遇到一个问题，父组件向子组件传值，子组件监听传入对象的某个属性的时候，发现子组件使用deep watch都不能监听到属性的变化。今天终于在网上找到了答案，在这里把方法记录下来。参考网址https://blog.csdn.net/oLianyo

解决
为啥会出现这种问题？受ES5的限制，Vue.js不能检测到对象属性的添加或删除。请参照https://v1-cn.vuejs.org/guide

解决方法

1. 通过vue的this.$set(object,key,value)
2. 通过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>

在我的项目中我引用了第一种方法。我觉得第一种方法更适合我的项目。

来自：https://segmentfault.com/a/1190000019213860

本文内容仅供个人学习、研究或参考使用，不构成任何形式的决策建议、专业指导或法律依据。未经授权，禁止任何单位或个人以商业售卖、虚假宣传、侵权传播等非学习研究目的使用本文内容。如需分享或转载，请保留原文来源信息，不得篡改、删减内容或侵犯相关权益。感谢您的理解与支持！

链接: https://shenqiku.cn/article/FLY_3359