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

比如，我們監(jiān)聽(tīng)對(duì)象的時(shí)候，在沒(méi)有踩坑之前，很容易這樣寫(xiě)：

但是，❌，這里的watch是無(wú)效的!!!

因?yàn)?obj 是引用類型！！！

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

舉個(gè)例子：

let obj = { a: 1 };let obj1 = obj;let obj2 = { ...obj };obj1.a = 2;obj2.a = 3;// 這里肯定是true，因?yàn)閛bj和obj1都是同一個(gè)指針，不明白的搜下引用類型console.log(obj1 === obj);// 這里肯定是false，因?yàn)橹羔槻煌琧onsole.log(obj2 === obj);

怎么解決呢？也簡(jiǎn)單！

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

！！！注意，因?yàn)槭且妙愋停詎ewValue 和oldValue始終相等，千萬(wàn)不要犯傻的寫(xiě)相等就return，那就永遠(yuǎn)也不往下走了。。。。

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

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

數(shù)組項(xiàng)是對(duì)象類型，就需要deep 數(shù)組項(xiàng)是值類型，就不需要deep

因?yàn)関ue2里，數(shù)組被特殊處理了，跟 obj 不等同，所以需要分情況。

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

對(duì)象類型的話，上面是不行的，先舉個(gè)錯(cuò)誤 ❌ 的例子：

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

正確做法 ✅：

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

watch失效的場(chǎng)景：

對(duì)象類型 數(shù)組項(xiàng)為對(duì)象類型的數(shù)組

解決方案：加deep:true。

watch的其他屬性

官網(wǎng)文檔

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

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

watch的用法

總結(jié)

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