Vue父子组件传值监听问题

描述

当props的传值类型为对象时，使用deep深度监听只会监听对象现有属性值的变化，不会监听对象属性的增加或者删除。

### 子组件
props:{
	obj:{
	type:Object,
	default:()=>{
    }
},
watch:{
    'obj':{
      handler(newVal,oldVal){
        console.log(newVal)//无输出值
      },
      deep:true
     }
}

### 父组件
<parent :obj='obj'></parent>
<script>
export default{
   data(){
   		return{
     		obj:{}
 		},
    },
    methods:{
       initData(){
         this.obj.status = 'success'
        }
}
 

这里给父组件赋值的status属性无法被监听到。 Vue 不能检测到对象属性的添加或删除。由于 Vue 会在初始化实例时对属性执行 getter/setter 转化过程，所以属性必须在 data 对象上存在才能让 Vue 转换它，这样才能让它是响应

解决方法

Vue.set(vm.obj,"status","succes")

this.$set(this.obj,"status","success")

//最常用
this.obj.status= "success";
this.obj = Object.assign({},this.obj)