vue.js watch經常失效的場景與解決方案

使用過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(){...}
}

引用

watch的用法

總結

到此這篇關於vue.js watch經常失效的場景與解決方案的文章就介紹到這瞭,更多相關vue.js watch失效的場景與解決內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet!

推薦閱讀: