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