Vue组件深度(deep)监听props对象属性无效的解决办法

在项目中有一个表单用到的地方很多，所以将其抽出来做成了一个业务组件，通过类型为Object的prop传递数据，在业务子组件中监听该对象prop。但是在开发过程中发现即使使用deep深度监听也无法监听到prop的数据变化，例如下面

<!-- 父组件 -->
<template>
  <div class="hello">
    <Child :data="data">
    </Child>
  </div>
</template>

<script>
import Child from './Child'
export default {
  name: 'HelloWorld',

  data () {
    return {
      data: {
        init: 'init',
        // refresh: ''
      }
    }
  },

  components: {
    Child
  },

  mounted () {
    setTimeout(() => {
      this.data.refresh = 'refresh'
      // this.$set(this.data, 'refresh', 'refresh')
      // this.data = Object.assign({}, this.data)
    })
  }
}
</script>

<!-- 子组件 -->
<template>
  <h1>
    <p>init{{data.init}}</p>
    <p>refresh{{data.refresh}}</p>
  </h1>
</template>
<script>
export default {
  name: 'Child',

  props: ['data'],

  watch: {
    data: {
      handler (newVal) {
        console.log(this.data.init, this.data.refresh)
      },
      deep: true,
      immediate: true
    }
  }
}
</script>

原因

之所以会出现这个现象是因为直接ES5已经舍弃了Object.observe方法，Vue无法监听对象属性删除和新增，故即使使用deep方法监听对象prop也没有用。

解决方法

1. 在父组件中声明对象的键
2. 使用this.$set()方法
3. 使用Object.assign({}, obj)方法