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

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

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

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

第一次不觸發(fā)

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

例如

我將父組件中的WatchId傳遞到這個子組件頁面我要根據(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)聽，有時無法執(zhí)行可以在組件上添加

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

通過時間來實時刷新組件內(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>

以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

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