Vue中watch監(jiān)聽(tīng)第一次不觸發(fā)、深度監(jiān)聽(tīng)問(wèn)題

更新時(shí)間：2022年10月17日 10:35:38 作者：至_臻

這篇文章主要介紹了Vue中watch監(jiān)聽(tīng)第一次不觸發(fā)、深度監(jiān)聽(tīng)問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

watch監(jiān)聽(tīng)第一次不觸發(fā)、深度監(jiān)聽(tīng)

第一次不觸發(fā)

handler：其值是一個(gè)回調(diào)函數(shù)。即監(jiān)聽(tīng)到變化時(shí)應(yīng)該執(zhí)行的函數(shù)。
deep：其值是true或false；確認(rèn)是否深入監(jiān)聽(tīng)。(一般監(jiān)聽(tīng)時(shí)是不能監(jiān)聽(tīng)到對(duì)象屬性值的變化的，數(shù)組的值變化可以聽(tīng)到。)
immediate：其值是true或false；確認(rèn)是否以當(dāng)前的初始值執(zhí)行handler的函數(shù)

例如

我將父組件中的WatchId傳遞到這個(gè)子組件頁(yè)面我要根據(jù)id來(lái)獲取數(shù)據(jù)watch監(jiān)聽(tīng)不到一次的數(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使用無(wú)效問(wèn)題

watch 用于監(jiān)聽(tīng)，有時(shí)無(wú)法執(zhí)行可以在組件上添加

:key="new Date().toString()"

通過(guò)時(shí)間來(lái)實(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雙向綁定失效的問(wèn)題
這篇文章主要介紹了解決v-model雙向綁定失效的問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2023-04-04
Vue組件模板的幾種書(shū)寫(xiě)形式(3種)
這篇文章主要介紹了Vue組件模板的幾種書(shū)寫(xiě)形式(3種)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2020-02-02
詳解在Vue中有條件地使用CSS類(lèi)
本篇文章主要介紹了詳解在Vue中有條件地使用CSS類(lèi)，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
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
深入了解Vue2中的的雙端diff算法
雙端Diff在可以解決更多簡(jiǎn)單Diff算法處理不了的場(chǎng)景，且比簡(jiǎn)單Diff算法性能更好。本文主要來(lái)和大家詳細(xì)講講Vue2中的雙端diff算法的實(shí)現(xiàn)與使用，需要的可以參考一下
2023-02-02
vue實(shí)現(xiàn)無(wú)縫滾動(dòng)的示例詳解
這篇文章主要為大家詳細(xì)介紹了vue非組件如何實(shí)現(xiàn)列表的無(wú)縫滾動(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單位問(wèn)題
這篇文章主要介紹了postcss-pxtorem設(shè)置不轉(zhuǎn)換UI框架的CSS單位問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
2024-07-07
詳解vue項(xiàng)目首頁(yè)加載速度優(yōu)化
這篇文章主要介紹了詳解vue項(xiàng)目首頁(yè)加載速度優(yōu)化，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2017-10-10