Vue.js是一款簡單易用的JavaScript框架，它采用MVVM設(shè)計模式，按組件化思想開發(fā)。Vue通過對數(shù)據(jù)驅(qū)動模型的響應(yīng)式的處理加速了前端的開發(fā)速度。同時，由于Vue的設(shè)計十分優(yōu)秀，使得在進行開發(fā)時，遇到各種問題都有相關(guān)的解決方案。但在Vue的使用過程中，還是有些地方需要注意，比如Vue的data數(shù)據(jù)對象是響應(yīng)式的，但僅僅支持淺層次的數(shù)據(jù)變化監(jiān)聽，即如果對象里嵌套了一個對象，改變這個對象里的一個屬性內(nèi)容并不會觸發(fā)視圖的更新。

這里使用一個例子說明，假設(shè)有一個product對象：

var product = {
category: 'Electronics',
details: {
name: 'iPhone',
price: 2000
}
}

現(xiàn)在在Vue中進行數(shù)據(jù)綁定：

new Vue({
el: '#app',
data: {
product: product
}
})

然后，假設(shè)我們在某些地方改變了iPhone價格：

product.details.price = 3000;

但是在頁面上卻并沒有發(fā)生任何改變。因為Vue只能監(jiān)聽到product對象的第一層屬性的變化，而不會檢測到嵌套對象details屬性的變化。這就是所謂的"淺層次監(jiān)聽"。

解決這個問題有兩個方法，第一個方法就是使用Vue提供的方法$set。它的作用是讓Vue能夠監(jiān)聽到對象中深層次的屬性變化。具體的做法如下：

this.$set(product.details, 'price', 3000);

第二個方法就是直接使用新的對象來替換原來的對象，因為Vue會監(jiān)聽新的對象，所以就能夠監(jiān)聽到深層次屬性的變化了。

var newProduct = Object.assign({}, product, {
details: Object.assign({}, product.details, {
price: 3000
})
});
this.product = newProduct;

通過以上兩種方法，就可以在Vue中監(jiān)聽到深層次對象屬性的變化了。