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

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

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

使用過watch的，應該起碼經(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);

怎么解決呢？也簡單！

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

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

監(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
 },
}

總結

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的用法

總結

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

您可能感興趣的文章:

Vue3 Pinia獲取全局狀態(tài)變量的實現(xiàn)方式
這篇文章主要介紹了Vue3 Pinia獲取全局狀態(tài)變量的實現(xiàn)方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
2024-05-05
Vue中使用Echarts可視化圖表寬度自適應的完美解決方案
這篇文章主要介紹了Vue中使用Echarts可視化圖表，寬度自適應解決方案,我的解決方案是，在放置Echarts的容器(div)外層再套一層容器(div)，外層容器寬度固定設置手機屏幕寬，感興趣的朋友跟隨小編一起看看吧
2022-09-09
如何用vue-pdf包實現(xiàn)pdf文件預覽,支持分頁
這篇文章主要介紹了如何用vue-pdf包實現(xiàn)pdf文件預覽,支持分頁問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
2024-03-03
vue中touch和click共存的解決方式
這篇文章主要介紹了vue中touch和click共存的解決方式，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2020-07-07
VueUse使用及造輪子選擇對比示例詳解
這篇文章主要為大家介紹了VueUse使用及造輪子選擇對比示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪
2022-08-08
el-tree文字顯示不全的解決辦法
本文主要介紹了el-tree文字顯示不全的解決辦法，文中通過示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2021-08-08
vue-router定義元信息meta操作
這篇文章主要介紹了vue-router定義元信息meta操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2020-12-12
基于Vue3實現(xiàn)日歷組件的示例代碼
日歷在很多地方都可以使用的到，這篇文章主要介紹了如何利用vue3實現(xiàn)簡單的日歷控件，文中通過示例代碼講解詳細，需要的朋友們下面隨著小編來一起學習學習吧
2023-04-04
LRU算法在Vue內置組件keep-alive中的使用
LRU算法全稱為least recently use 最近最少使用，核心思路是最近被訪問的以后被訪問的概率會變高，那么可以把之前沒被訪問的進行刪除，維持一個穩(wěn)定的最大容量值，從而不會導致內存溢出。
2021-05-05
mpvue中配置vuex并持久化到本地Storage圖文教程解析
這篇文章主要介紹了mpvue中配置vuex并持久化到本地Storage的教程詳解,# 配置vuex和在vue中相同，只是mpvue有一個坑，就是不能直接在new Vue的時候傳入store。本文分步驟給大家介紹的非常詳細，需要的朋友參考下吧
2018-03-03