vue 父子页面双向绑定对象数据不更新问题

问题

父子页面双向绑定数据，子页面使用父页面传入对象形式的data，使用$emit(‘update:data’,data) 更新父级数据，在子页面在使用this.data时，
此时this.data依然是未更新的data对象

解决方法

	this.$emit("update:data", res.data);

	this.$nextTick(function() {
		//this.data已更新
	});
复制代码

问题产生原因

如果只更新对象的某个属性，子页面可以直接赋值，并且父子页面都会得到更新，但是如果想更新整个prop data对象，子页面赋值会报错，使用$emit更新父级data子页面使用时也不会更新这个值

产生的原因类似

	let data = { a : 1 , b : 2 } //父级组件的data
	//子组件props
	props_data = null
	
复制代码

在子组件渲染完成后

	props_data = data//父组件data
复制代码

实际上 props_data 和 data 指向都同一个对象，props_data 和 data 任何属性数据更新的时候，另外一个也会同步更新

但是如果更新整个data 对象的时候,相当于

	data = { a : 3 , b : 4 }//父组件data
	
	props_data === data //false
复制代码

此时props_data 依旧指向旧对象

等到下一次渲染的时候（异步队列），子组件更新props，这个时候重新赋值

	props_data = data//父组件data
复制代码

这时候两者就一样了

此次主要涉及深浅拷贝，eventLoop等知识点，此处不在赘述。