使用過watch
的,應該起碼經歷過一次失效。
比如,我們監聽對象的時候,在沒有踩坑之前,很容易這樣寫:
但是,❌,這裏的watch
是無效的!!!
因為 obj 是引用類型!!!
引用類型的指針是固定的,所以如果不是重新賦值,那麼其賦值的變量自然也不會發生變化。
舉個例子:
let obj = { a: 1 };
let obj1 = obj;
let obj2 = { ...obj };
obj1.a = 2;
obj2.a = 3;
// 這裏肯定是true,因為obj和obj1都是同一個指針,不明白的搜下引用類型
console.log(obj1 === obj);
// 這裏肯定是false,因為指針不同
console.log(obj2 === obj);
複製代碼
怎麼解決呢?也簡單!
設置deep:true
,這樣obj
中的屬性發生變化(可被監測到的),便會執行 handler 函數;。
!!!注意,因為是引用類型,所以
newValue
和oldValue
始終相等,千萬不要犯傻的寫相等就return
,那就永遠也不往下走了。。。。
監測數組
引用類型,除了對象,很容易想到數組,那數組是不是也需要這樣寫呢。
話分兩頭:
- 數組項是對象類型,就需要
deep
- 數組項是值類型,就不需要
deep
因為vue2
裏,數組被特殊處理了,跟 obj 不等同,所以需要分情況。
也就是數組項是值類型的話,直接這麼寫就行:
對象類型的話,上面是不行的,先舉個錯誤 ❌ 的例子:
不打印的原理,依然是數組項是對象類型,想watch對象類型,必須加deep
正確做法 ✅:
watch:{
arr: {
handler(newValue) {
// 這裏就可以打印了
console.log(newValue);
},
deep: true
},
}
複製代碼
總結
watch
失效的場景:
- 對象類型
- 數組項為對象類型的數組
解決方案:加
deep:true
。
watch的其他屬性
- 一開始就需要執行
watch
的話,可immediate
屬性 handle
可以是一個數組- 取消
watch
的話,this.$unwatch
watch
對象的某個屬性的話,'obj.key'(){}
- 如果想同時檢測兩個屬性,懶得一個個寫的話,有個偷懶的法子用
computed
做中間層。
computed:{
fullName(){return this.firstName + this.lastName}
},
watch:{
fullName(){...}
}
複製代碼