vue組件實現(xiàn)首次加載就觸發(fā)watch
更新時間：2022年07月02日 14:23:32 作者：cxy_pan0913
這篇文章主要介紹了vue組件實現(xiàn)首次加載就觸發(fā)watch方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
組件首次加載就觸發(fā)watch
首次加載就觸發(fā)watch需要修改其immediate屬性為true，其默認(rèn)值為false
watch:{
"val":{
immediate:true,//首次加載的時候執(zhí)行函數(shù)
deep:true,//深入觀察數(shù)組值的變化，
inputVal:function(){
}
}
}
watch的初始立即執(zhí)行
當(dāng) watch 一個變量的時候，初始化時并不會執(zhí)行，如下面的例子，你需要在created的時候手動調(diào)用一次。
created() {
? this.fetchUserList();
},
watch: {
? searchText: 'fetchUserList',
}上面這樣的做法可以使用，但很麻煩，我們可以添加immediate屬性，這樣初始化的時候就會自動觸發(fā)(不用再寫created去調(diào)用了)，然后上面的代碼就能簡化為：
watch: {
? searchText: {
? ? handler: 'fetchUserList',
? ? immediate: true
? }
}以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
在Vue3中,我們經(jīng)常會遇到需要處理列表渲染的情況,Vue3引入了一種新的語法,即#default=“scope”,本文就來介紹一下Vue3中#default=“scope”的使用,感興趣的可以了解一下2023-10-10
在vue3.x中vuex調(diào)取值在html代碼里可以直接使用vue2.x的方法,但是在js里與vue2.x就有了那么一丟丟的不同,下面這篇文章主要給大家介紹了關(guān)于Vue3中Vuex詳細使用的相關(guān)資料,需要的朋友可以參考下2022-07-07
這篇文章主要介紹了在vue中如何使用Mock.js模擬數(shù)據(jù)問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-05-05
Vue前端開發(fā)中表單組件是排在前三的高頻使用的組件,下面這篇文章主要給大家介紹了關(guān)于vue可視化表單設(shè)計器自定義組件使用的相關(guān)資料,文中通過代碼介紹的非常詳細,需要的朋友可以參考下2023-12-12
這篇文章主要介紹了vuex實現(xiàn)的簡單購物車功能,結(jié)合實例形式分析了vuex購物車組件相關(guān)商品列表、購物車創(chuàng)建、添加、刪除、清空等相關(guān)操作技巧,需要的朋友可以參考下2019-02-02
vue3?組合式api中?ref?和$parent?的使用方法
vue3中， 在 組件中添加一個 component ref=“xxx” ，就可以在父組件中得到 子組件的 dom 對象， 以及 虛擬的 dom 對象， 有了虛擬 dom, 我們就可以在父組件中控制子組件的顯示了，這篇文章主要介紹了vue3組合式api中ref和$parent的使用,需要的朋友可以參考下2023-09-09
本篇文章主要介紹了vue頁面使用阿里oss上傳功能的實例（一），小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-08-08
Vue切換組件實現(xiàn)返回后不重置數(shù)據(jù),保留歷史設(shè)置操作
這篇文章主要介紹了Vue切換組件實現(xiàn)返回后不重置數(shù)據(jù),保留歷史設(shè)置操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-07-07
詳解Vue2.x-directive的學(xué)習(xí)筆記
這篇文章主要介紹了詳解Vue2.x-directive的學(xué)習(xí)筆記，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-07-07
這篇文章主要給大家介紹了關(guān)于vue3.0項目快速搭建的相關(guān)資料,本文通過圖文以及實例代碼介紹的非常詳細,對大家學(xué)習(xí)或者使用vue3.0具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2021-12-12