watch深度監聽的正確開啟方式

在大部分日常開發中，我們經常需要使用watch監聽資料變化，但如果想監聽的資料層級比較深，往往結果並不盡如人意，本文介紹兩種深度監聽資料變化的方法

1.藉助deep: true深度監聽

watch: {
    obj: {
    	// 資料變化時執行的邏輯程式碼
        handler(newName, oldName) {
            console.log('obj.a changed');
        },
        // 開啟深度監聽
        deep: true
    }
}
複製程式碼

watch監聽物件，同時用**deep: true**深度監聽，此時只有物件中的某個值發生改變就會觸發

2.藉助computed計算屬性監聽

// 通過計算屬性，計算出需要監聽的資料
computed: {
    changed: function () {
        return this.obj.changed
    }
},

// 不通過deep，仍然可以深度監聽計算出來的資料
watch: {
    changed: function () {
        console.log(this.changed)
    }
}
複製程式碼

通過computed計算屬性的配合，先計算出需要監聽的屬性後用watch監聽

從效能以及可讀性考慮，個人比較推薦第二種方式