VUE watch监听对象

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/u010046318/article/details/82844902

今天在项目实现中遇到了关于在Vue中watch监听对象失败的问题，背景是这样的：

我在VUE组件中的data里声明了一个空对象：

obj: { }

然后在某一个函数里面对obj添加某个对象：

obj.name = 'liu'

再在另一个函数里，对obj的name属性进行修改

obj.name = 'yang'

监听函数就是大家所熟知的下面这种写法：

watch: {
	obj: {
		handler: function(newValue) {
			console.log(newValue);
		},
		deep: true
	}
}

然而，这种方式根本监听不到obj对象中属性的改变，因为在data中的obj里是没有属性的，而受现代 JavaScript 的限制 (以及废弃 Object.observe)，Vue 不能检测到对象属性的添加或删除。由于 Vue 会在初始化实例时对属性执行 getter/setter 转化过程，所以属性必须在 data 对象上存在才能让 Vue 转换它，这样才能让它是响应的。因此，只有把name属性一开始就放在obj对象里面才会深度监听到obj对象中属性的变化。
上面一种监听方式也可以写成下面这种形式：

watch: {
	'obj.name' : {
		handle(newValue) {
			console.log(newValue);
		},
		deep: true
	}
}