vue watch如何深度監(jiān)聽數(shù)組每一項(xiàng)的變化

更新時(shí)間：2024年07月12日 08:55:53 作者：苦夏木禾

這篇文章主要介紹了vue watch如何深度監(jiān)聽數(shù)組每一項(xiàng)的變化問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教

vue watch深度監(jiān)聽數(shù)組每一項(xiàng)的變化

在 Vue 中，watch 選項(xiàng)默認(rèn)只能監(jiān)聽對(duì)象的屬性變化，無法直接監(jiān)聽數(shù)組的變化

監(jiān)聽數(shù)組變化

一般情況下我們監(jiān)聽數(shù)組變化，可以監(jiān)聽長(zhǎng)度的變化

watch(() => list.value.length, (now, old) => {
    // 會(huì)在數(shù)組長(zhǎng)度變化時(shí)觸發(fā)
})

上面的寫法不能做到監(jiān)聽某一項(xiàng)的變化

深度監(jiān)聽

給定第三個(gè)參數(shù)

watch(() => list.value, (now, old) => {
    // 此時(shí)會(huì)在數(shù)組每一項(xiàng)內(nèi)容發(fā)生變化時(shí)產(chǎn)生變化
}, { deep: true })

watch監(jiān)聽用法(監(jiān)聽對(duì)象、數(shù)組、路由）

直接監(jiān)聽對(duì)象

可以直接監(jiān)聽對(duì)象某個(gè)值，‘obj.name’，或者是監(jiān)聽路由’$route’(to,from)，

若需要第一次綁定值進(jìn)而觸發(fā)，可以使用第二種設(shè)置immediate: true。

若對(duì)對(duì)象進(jìn)行深度監(jiān)聽（監(jiān)聽對(duì)象會(huì)對(duì)每個(gè)屬性添加監(jiān)聽，會(huì)造成性能損耗)，可以直接深度監(jiān)聽對(duì)象屬性避免

//監(jiān)聽對(duì)象
 watch:{
  obj:{ //監(jiān)聽的對(duì)象
     deep: true, // 深度監(jiān)聽
     immediate:true, 
     //當(dāng) watch 一個(gè)變量的時(shí)候，初始化時(shí)并不會(huì)執(zhí)行你需要在created的時(shí)候手動(dòng)調(diào)用一次。添加immediate屬性，這樣初始化的時(shí)候也會(huì)觸發(fā)
     handler:function(newV,oldV){
      console.log('watch中：',newV)
    }
  }
}

//監(jiān)聽路由
 watch: {
    $route: function (newVal, oldVal) {
     
    },
 }

//監(jiān)聽數(shù)組
 watch: {
   arr: {
      handler(data, oldVal) {
             
      },
      deep: true,
     },
}

總結(jié)

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

vue新手入門出現(xiàn)function () { [native code]&nbs
這篇文章主要介紹了vue新手入門出現(xiàn)function () { [native code] }錯(cuò)誤的解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-04-04
elementUI table表格動(dòng)態(tài)合并的示例代碼
這篇文章主要介紹了elementUI table表格動(dòng)態(tài)合并的示例代碼，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2019-05-05
VUE多層路由嵌套實(shí)現(xiàn)代碼
這篇文章主要為大家詳細(xì)介紹了VUE多層路由嵌套的實(shí)現(xiàn)代碼，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2017-05-05
基于vuejs+webpack的日期選擇插件
這篇文章主要為大家詳細(xì)介紹了基于vuejs+webpack的日期選擇插件，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2016-11-11
Vuex中g(shù)etters和actions的使用補(bǔ)充說明
這篇文章主要介紹了在Vuex中關(guān)于getters和actions使用的補(bǔ)充作了簡(jiǎn)要說明，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步
2021-09-09
在Vue中使用highCharts繪制3d餅圖的方法
本篇文章主要介紹了在Vue中使用highCharts繪制3d餅圖的方法，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2018-02-02
vue中路由router配置步驟詳解
vue的主要思想是組件化開發(fā),路由用來配置組件對(duì)應(yīng)展示路徑,本文給大家介紹vue中路由router配置步驟,創(chuàng)建路由文件——使用路由——配置路由出口,使路由配置內(nèi)容展示在頁面上,感興趣的朋友跟隨小編一起看看吧
2023-12-12
vue實(shí)現(xiàn)的封裝全局filter并統(tǒng)一管理操作示例
這篇文章主要介紹了vue實(shí)現(xiàn)的封裝全局filter并統(tǒng)一管理操作,結(jié)合實(shí)例形式詳細(xì)分析了vue封裝全局filter及相關(guān)使用技巧,需要的朋友可以參考下
2020-02-02
Vue.js設(shè)計(jì)與實(shí)現(xiàn)無限遞歸學(xué)習(xí)總結(jié)
這篇文章主要為大家介紹了Vue.js設(shè)計(jì)與實(shí)現(xiàn)無限遞歸學(xué)習(xí)總結(jié)，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2023-05-05
Vue實(shí)現(xiàn)渲染數(shù)據(jù)后控制滾動(dòng)條位置(推薦)
這篇文章主要介紹了Vue實(shí)現(xiàn)渲染數(shù)據(jù)后控制滾動(dòng)條位置，本文通過圖文并茂的形式給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
2019-12-12