今天在專案實現中遇到了關於在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
	}
}