vue数据响应式注意点

[TOC]

今天在使用某个对象obj的数据控制table的列动态显示的时候，无论obj怎么变化，表格都不会动态更新。找大佬查了半天，发现是数据响应式的问题，在vue官方文档中还特别提过这个坑，还是要多看看文档的。
https://cn.vuejs.org/v2/guide/reactivity.html

obj在data中初始化的时候是个空对象，在更新obj的时候直接用的是添加属性

data: {
	obj: {}
}
watch: {
	test() {
		obj[key1] = val1;
	}
}

这样无法检测到obj变化。
在vue文档中说过：

受现代 JavaScript 的限制 (以及废弃 Object.observe)，Vue 不能检测到对象属性的添加或删除。由于 Vue会在初始化实例时对属性执行 getter/setter 转化过程，所以属性必须在 data 对象上存在才能让 Vue转换它，这样才能让它是响应的

解决这个问题有两种方法：
1.在data里实现就生命好属性key1
2.利用中间遍历

data: {
	obj: {}
}
watch: {
	test() {
		const temp={};
		temp[kee1] = val1;
		obj = temp;
	}
}

这样也是能检测到obj变化的。