vue父组件给子组件传递的参数发生改变时,子组件不能及时更新的问题

写代码时遇到的一个坑,希望可以帮助遇到同样问题的人

问题:

当我在父组件给子组件绑定数据后,再在父组件中修改传递给子组件的相关属性时,子组件并不能及时渲染数据.

子组件的props其实接收到了更新事件,但是我是直接在data中赋值 table: this.table ，这样赋值，虽然子组件第一次可以获取到父组件传递的值，但是当父组件改变了引用，子组件data中保存的还是之前的引用，所以子组件无法获取更新。

解决方法:

正确的做法是：在子组件中的watch监听中，监听该对象，并且给data中的数据赋值

原理:

在子组件中watch是用来监听props的监听器,只需要给要监听的props属性在watch声明同名的方法,即可监听对应data属性的变化.

watch 还有两个选项:deep和immediate

deep:深度监听,当传入的是一个对象,且对象中的属性发生了变化,那么使用deep:true 可以实现监听,由于这相当于给每个属性都添加了监听,将会使得开销过大,考虑开销过大情况,可以只给对象中的某个属性添加监听。使用对象.属性的格式即可.

immediate: watch只有在值变化时才会触发,所以第一次是不会监听值的变化,如果要在侦听开始之后被立即调用(子组件props首次获取到父组件传来的默认值时),设置immediate: true即可.

问题复现以及解决：

父组件:

父组件中，某个方法使得传递给子组件的 table对象 的引用(或某个属性值)发生了变化。(注意:如果是对象中的属性值发生了变化,应在子组件的watch中对应的方法中添加deep:true进行深度监听，才可以渲染数据)

  <keypad :table="table"></keypad>

子组件:

data() {
	return{
	  tableInfo:{}
	}
},
watch: {
	table(){
		this.tableInfo = this.table
	}
},
props:{
	table:{
		type:Object，
		default(){ 
		return {}
		}
	}
}