快捷導(dǎo)航

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)文章

vue 添加vux的代碼講解
通過(guò)命令npm install vux --save添加vux，在相關(guān)配置文件中配置信息，具體代碼添加方法，大家參考下本文
2017-11-11
vue3中使用jsx的實(shí)現(xiàn)步驟
本文主要介紹了vue3中使用jsx的實(shí)現(xiàn)步驟，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2023-07-07
vue+springboot用戶注銷(xiāo)功能實(shí)現(xiàn)代碼
這篇文章主要介紹了vue+springboot用戶注銷(xiāo)功能,本文通過(guò)示例代碼給大家介紹的非常詳細(xì),感興趣的朋友跟隨小編一起看看吧
2024-05-05
Vue組件庫(kù)ElementUI實(shí)現(xiàn)表格加載樹(shù)形數(shù)據(jù)教程
這篇文章主要為大家詳細(xì)介紹了Vue組件庫(kù)ElementUI實(shí)現(xiàn)表格加載樹(shù)形數(shù)據(jù)教程，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2021-06-06
vue3中proxy的基本用法說(shuō)明
這篇文章主要介紹了vue3中proxy的基本用法說(shuō)明，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-05-05
使用vscode添加vue模板步驟示例
這篇文章主要為大家介紹了vscode添加vue模板步驟示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2022-08-08
vue3+ts+echarts實(shí)現(xiàn)按需引入和類(lèi)型界定方式
這篇文章主要介紹了vue3+ts+echarts實(shí)現(xiàn)按需引入和類(lèi)型界定方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-10-10
超實(shí)用vue中組件間通信的6種方式(最新推薦)
組件是 vue.js最強(qiáng)大的功能之一，而組件實(shí)例的作用域是相互獨(dú)立的，這就意味著不同組件之間的數(shù)據(jù)無(wú)法相互進(jìn)行直接的引用，所以組件間的相互通信是非常重要的，這篇文章主要介紹了vue中組件間通信的6種方式,需要的朋友可以參考下
2022-11-11
vue如何給組件動(dòng)態(tài)綁定不同的事件
這篇文章主要介紹了vue如何給組件動(dòng)態(tài)綁定不同的事件，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-10-10
Vue 基礎(chǔ)語(yǔ)法之計(jì)算屬性(computed)、偵聽(tīng)器(watch)、過(guò)濾器(filters)詳解
計(jì)算屬性就是 Vue 實(shí)例選項(xiàng)中的 computed，computed 的值是一個(gè)對(duì)象類(lèi)型，對(duì)象中的屬性值為函數(shù)，而且這個(gè)函數(shù)沒(méi)辦法接收參數(shù)，這篇文章主要介紹了Vue 基礎(chǔ)語(yǔ)法之計(jì)算屬性(computed)、偵聽(tīng)器(watch)、過(guò)濾器(filters)詳解,需要的朋友可以參考下
2022-11-11