快捷導(dǎo)航

vue.js watch經(jīng)常失效的場景與解決方案

更新時間：2021年01月07日 10:27:26 作者：顏醬

這篇文章主要給大家介紹了關(guān)于vue.js watch經(jīng)常失效的場景與解決方案，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

使用過watch的，應(yīng)該起碼經(jīng)歷過一次失效。

比如，我們監(jiān)聽對象的時候，在沒有踩坑之前，很容易這樣寫：

但是，❌，這里的watch是無效的!!!

因為 obj 是引用類型?。?！

引用類型的指針是固定的，所以如果不是重新賦值，那么其賦值的變量自然也不會發(fā)生變化。

舉個例子：

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);

怎么解決呢？也簡單！

設(shè)置deep:true，這樣obj中的屬性發(fā)生變化（可被監(jiān)測到的），便會執(zhí)行 handler 函數(shù)；。

！??！注意，因為是引用類型，所以newValue 和oldValue始終相等，千萬不要犯傻的寫相等就return，那就永遠(yuǎn)也不往下走了。。。。

監(jiān)測數(shù)組

引用類型，除了對象，很容易想到數(shù)組，那數(shù)組是不是也需要這樣寫呢。
話分兩頭：

數(shù)組項是對象類型，就需要deep
數(shù)組項是值類型，就不需要deep

因為vue2里，數(shù)組被特殊處理了，跟 obj 不等同，所以需要分情況。

也就是數(shù)組項是值類型的話，直接這么寫就行：

對象類型的話，上面是不行的，先舉個錯誤 ❌ 的例子：

不打印的原理，依然是數(shù)組項是對象類型，想watch對象類型，必須加deep

正確做法 ✅：

watch:{
 arr: {
 handler(newValue) {
  // 這里就可以打印了
  console.log(newValue);
 },
 deep: true
 },
}

總結(jié)

watch失效的場景：

對象類型
數(shù)組項為對象類型的數(shù)組

解決方案：加deep:true。

watch的其他屬性

官網(wǎng)文檔

一開始就需要執(zhí)行watch的話，可 immediate屬性
handle可以是一個數(shù)組
取消watch的話，this.$unwatch
watch對象的某個屬性的話，'obj.key'(){}
如果想同時檢測兩個屬性，懶得一個個寫的話，有個偷懶的法子用computed做中間層。

computed:{
 fullName(){return this.firstName + this.lastName}
},
watch:{
 fullName(){...}
}

引用

watch的用法

總結(jié)

到此這篇關(guān)于vue.js watch經(jīng)常失效的場景與解決方案的文章就介紹到這了,更多相關(guān)vue.js watch失效的場景與解決內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

vue.js watch經(jīng)常失效的場景與解決方案

監(jiān)測數(shù)組

總結(jié)

watch的其他屬性

引用

總結(jié)

相關(guān)文章

最新評論

大家感興趣的內(nèi)容

最近更新的內(nèi)容

常用在線小工具