Vue.js 是一個(gè)非常流行的前端框架，其中的 $watch 對(duì)象可以讓我們實(shí)時(shí)監(jiān)控?cái)?shù)據(jù)的變化，以便及時(shí)響應(yīng)和更新界面上的變化。在實(shí)踐中，我們常常需要使用 $watch 來(lái)監(jiān)聽(tīng)一個(gè)對(duì)象的變化。

// 在 Vue 實(shí)例中定義一個(gè) data 屬性
data: {
user: {
name: 'Tom',
age: 18
}
}
// 使用 $watch 監(jiān)聽(tīng) user 對(duì)象的變化
watch: {
'user': {
deep: true,
handler: function (newValue, oldValue) {
console.log('user 對(duì)象發(fā)生變化：', newValue, oldValue)
}
}
}

在上面的代碼中，我們定義了一個(gè)包含 name 和 age 兩個(gè)屬性的 user 對(duì)象，并使用 $watch 來(lái)監(jiān)聽(tīng)它的變化。$watch 的第一個(gè)參數(shù)是需要監(jiān)聽(tīng)的屬性，它可以是一個(gè)字符串（如上例中的 'user'）或一個(gè)函數(shù)（如下面的例子），第二個(gè)參數(shù)是一個(gè)對(duì)象，表示監(jiān)聽(tīng)器的配置選項(xiàng)。

// 當(dāng) user 的 name 屬性變化時(shí)，觸發(fā)監(jiān)聽(tīng)函數(shù)
watch: {
function () {
return this.user.name
},
function (newValue, oldValue) {
console.log('user 的 name 屬性發(fā)生變化：', newValue, oldValue)
}
}

需要注意的是，當(dāng)監(jiān)聽(tīng)對(duì)象是一個(gè)對(duì)象或數(shù)組時(shí)，$watch 默認(rèn)是淺層監(jiān)聽(tīng)，只能監(jiān)聽(tīng)到對(duì)象或數(shù)組本身的變化，而不能監(jiān)聽(tīng)到它們內(nèi)部屬性或元素的變化。所以，如果需要深層監(jiān)聽(tīng)，需要在監(jiān)聽(tīng)器配置選項(xiàng)對(duì)象中設(shè)置 deep 選項(xiàng)為 true，如下所示：

// 深度監(jiān)聽(tīng) user 對(duì)象的變化
watch: {
'user': {
deep: true,
handler: function (newValue, oldValue) {
console.log('user 對(duì)象發(fā)生變化：', newValue, oldValue)
}
}
}

以上是關(guān)于 Vue $watch 對(duì)象的簡(jiǎn)單介紹，希望對(duì)你有所幫助！