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

看完上述內容是否對您有幫助呢？如果還想對相關知識有進一步的了解或閱讀更多相關文章，請關注創新互聯行業資訊頻道，感謝您對創新互聯網站建設公司，的支持。

網站欄目：vue.js中watch失效如何解決-創新互聯
轉載源于：http://vcdvsql.cn/article34/ddgjse.html

成都網站建設公司_創新互聯，為您提供App開發、品牌網站設計、自適應網站、域名注冊、網頁設計公司、網站改版

廣告

聲明：本網站發布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創新互聯