vue watch如何深度監(jiān)聽數(shù)組每一項的變化
更新時間：2024年07月12日 08:55:53 作者：苦夏木禾
這篇文章主要介紹了vue watch如何深度監(jiān)聽數(shù)組每一項的變化問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
vue watch深度監(jiān)聽數(shù)組每一項的變化
在 Vue 中，watch 選項默認(rèn)只能監(jiān)聽對象的屬性變化，無法直接監(jiān)聽數(shù)組的變化
監(jiān)聽數(shù)組變化
一般情況下我們監(jiān)聽數(shù)組變化，可以監(jiān)聽長度的變化
watch(() => list.value.length, (now, old) => {
// 會在數(shù)組長度變化時觸發(fā)
})上面的寫法不能做到監(jiān)聽某一項的變化
深度監(jiān)聽
給定第三個參數(shù)
watch(() => list.value, (now, old) => {
// 此時會在數(shù)組每一項內(nèi)容發(fā)生變化時產(chǎn)生變化
}, { deep: true })watch監(jiān)聽用法(監(jiān)聽對象、數(shù)組、路由）
直接監(jiān)聽對象
可以直接監(jiān)聽對象某個值，‘obj.name’，或者是監(jiān)聽路由’$route’(to,from)，
若需要第一次綁定值進(jìn)而觸發(fā)，可以使用第二種設(shè)置immediate: true。
若對對象進(jìn)行深度監(jiān)聽（監(jiān)聽對象會對每個屬性添加監(jiān)聽，會造成性能損耗)，可以直接深度監(jiān)聽對象屬性避免
//監(jiān)聽對象
watch:{
obj:{ //監(jiān)聽的對象
deep: true, // 深度監(jiān)聽
immediate:true,
//當(dāng) watch 一個變量的時候，初始化時并不會執(zhí)行你需要在created的時候手動調(diào)用一次。添加immediate屬性，這樣初始化的時候也會觸發(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é)
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
Vue與compressor.js實現(xiàn)高效文件壓縮的方法
本文將介紹基于 Vue 框架和 compressor.js 的上傳時文件壓縮實現(xiàn)方法,通過在上傳過程中對文件進(jìn)行壓縮,減小文件大小,提升上傳速度,為用戶創(chuàng)造更快捷、高效的上傳體驗,感興趣的朋友跟隨小編一起看看吧2024-03-03
這篇文章主要為大家詳細(xì)介紹了vue實現(xiàn)可移動的懸浮按鈕，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-03-03
要實現(xiàn) Vue 自定義組件改變組件背景色,你可以通過 props 將背景色作為組件的一個屬性傳遞給組件,在組件內(nèi)部監(jiān)聽這個屬性的變化,并將其應(yīng)用到組件的樣式中,下面通過示例代碼介紹Vue如何實現(xiàn)自定義組件改變組件背景色,感興趣的朋友一起看看吧2024-03-03
vue跳轉(zhuǎn)頁簽傳參并查詢參數(shù)的保姆級教程
這篇文章主要介紹了vue跳轉(zhuǎn)頁簽傳參并查詢參數(shù)的保姆級教程,本文給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2023-04-04
本篇文章主要介紹了vue input輸入框模糊查詢的示例代碼，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-05-05
這篇文章主要介紹 Vue3組件傳參的方式,包括父子組件、跨層級組件、兄弟組件的傳參,如父子組件通過屬性綁定和自定義事件雙向傳參,跨層級組件可利用 Provide/Inject 機(jī)制和 Pinia 狀態(tài)管理,兄弟組件可通過父組件中轉(zhuǎn)或 mitt 庫直接傳參,需要的朋友可以參考下2025-01-01
vue 百度地圖(vue-baidu-map)繪制方向箭頭折線實例代碼詳解
這篇文章主要介紹了vue 百度地圖(vue-baidu-map)繪制方向箭頭折線,本文通過實例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2020-04-04
windows下vue-cli導(dǎo)入bootstrap樣式
這篇文章主要介紹了windows下vue-cli導(dǎo)入bootstrap樣式，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-04-04
Vee-validate 父組件獲取子組件表單校驗結(jié)果的實例代碼
vee-validate 是為 Vue.js 量身打造的表單校驗框架，允許您校驗輸入的內(nèi)容并顯示對應(yīng)的錯誤提示信息。這篇文章主要介紹了Vee-validate 父組件獲取子組件表單校驗結(jié)果 ,需要的朋友可以參考下2019-05-05
這篇文章主要為大家介紹了Vitepress的文檔渲染基礎(chǔ)教程，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-10-10