Vue中watch監(jiān)聽第一次不觸發(fā)、深度監(jiān)聽問題
更新時(shí)間：2022年10月17日 10:35:38 作者：至_臻
這篇文章主要介紹了Vue中watch監(jiān)聽第一次不觸發(fā)、深度監(jiān)聽問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
watch監(jiān)聽第一次不觸發(fā)、深度監(jiān)聽
第一次不觸發(fā)
handler：其值是一個(gè)回調(diào)函數(shù)。即監(jiān)聽到變化時(shí)應(yīng)該執(zhí)行的函數(shù)。deep：其值是true或false；確認(rèn)是否深入監(jiān)聽。(一般監(jiān)聽時(shí)是不能監(jiān)聽到對(duì)象屬性值的變化的，數(shù)組的值變化可以聽到。)immediate：其值是true或false；確認(rèn)是否以當(dāng)前的初始值執(zhí)行handler的函數(shù)
例如
我將父組件中的WatchId傳遞到這個(gè)子組件頁面我要根據(jù)id來獲取數(shù)據(jù)watch監(jiān)聽不到一次的數(shù)據(jù)變化，下面是我的例子
<script>
export default {
props:{
WatchId:{
type:Number,
default:''
}
},
data(){
return{
editWatchId:'',
},
watch:{
WatchId:{
immediate:true,
handler(id){
console.log(id)
this.editWatchId=id
}
}
},
}
}
</script>vue watch使用無效問題
watch 用于監(jiān)聽，有時(shí)無法執(zhí)行可以在組件上添加
:key="new Date().toString()"
通過時(shí)間來實(shí)時(shí)刷新組件內(nèi)容，示例：
<el-dialog class="dialog-update" ? ? ? ? ? ? ? ? ? ? ? ?width="880px“ ? ? ? ? ? ? ? ? ? ? ? ?:modal="false" ? ? ? ? ? ? ? ? ? ? ? ?:close-on-click-modal="false" ? ? ? ? ? ? ? ? ? ? ? ?:visible.sync="checkReceiptVisible"> ? ? ? ? <ReceiptDetail v-if="checkReceiptVisible" :key="new Date().toString()"/> ?</el-dialog>
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了解決v-model雙向綁定失效的問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-04-04
這篇文章主要介紹了Vue組件模板的幾種書寫形式(3種)，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-02-02
本篇文章主要介紹了詳解在Vue中有條件地使用CSS類，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-09-09
vue實(shí)現(xiàn)移動(dòng)端觸屏拖拽功能
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)移動(dòng)端觸屏拖拽功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-08-08
Vue實(shí)現(xiàn)base64編碼圖片間的切換功能
這篇文章主要介紹了Vue實(shí)現(xiàn)base64編碼圖片間的切換功能，本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-12-12
雙端Diff在可以解決更多簡(jiǎn)單Diff算法處理不了的場(chǎng)景，且比簡(jiǎn)單Diff算法性能更好。本文主要來和大家詳細(xì)講講Vue2中的雙端diff算法的實(shí)現(xiàn)與使用，需要的可以參考一下2023-02-02
vue實(shí)現(xiàn)無縫滾動(dòng)的示例詳解
這篇文章主要為大家詳細(xì)介紹了vue非組件如何實(shí)現(xiàn)列表的無縫滾動(dòng)效果,文中的示例代碼簡(jiǎn)潔易懂,感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2023-09-09
vue如何轉(zhuǎn)換時(shí)間格式為年月日時(shí)分秒和年月日(補(bǔ)零)
這篇文章主要介紹了vue如何轉(zhuǎn)換時(shí)間格式為年月日時(shí)分秒和年月日(補(bǔ)零),具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-04-04
postcss-pxtorem設(shè)置不轉(zhuǎn)換UI框架的CSS單位問題
這篇文章主要介紹了postcss-pxtorem設(shè)置不轉(zhuǎn)換UI框架的CSS單位問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-07-07
這篇文章主要介紹了詳解vue項(xiàng)目首頁加載速度優(yōu)化，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-10-10