Vuejs中的watch實例詳解(監(jiān)聽者)
最近剛剛追完慶余年，心思還總是在劇情里，然后就覺得在vuejs里watch就是監(jiān)察院，一個不折不扣的特務機構(gòu)。在Vue中watch被稱為監(jiān)聽者，它隨時觀察這vue實例中每一個數(shù)據(jù)的變化，當數(shù)據(jù)發(fā)生改變，做出響應。
通過下面的示例代碼來看一下這個監(jiān)察院是怎么運作的：
new Vue({
el:"#app",
data(){
reutrn {
candy:""
}
},
//傳說中的監(jiān)察院start
watch:{
candy:{
handler(newVal,oldVal){
},
immediate: true,
deep:true
}
}
//傳輸中的監(jiān)察院end
})
/***
watch中監(jiān)控這candy這個數(shù)據(jù)的變化，
handler中傳入了兩個參數(shù)：
newVal->是改變后的數(shù)據(jù)
oldVal->是改變前的數(shù)據(jù)
***/
按照慶余年的劇情分析，監(jiān)察院在監(jiān)控candy這個人，一旦candy發(fā)生變節(jié)，就會執(zhí)行handler中的操作，newVal和oldVal就好像是提供給監(jiān)察院人員來判斷如果candy是內(nèi)部斗爭還是叛國，根據(jù)情節(jié)處以什么樣的處罰。
代碼中 immediate 和 deep 又是什么意思呢？
immediate和deep像是慶帝給陳萍萍的指令：
immediate為true是告訴監(jiān)察院不管candy有沒有變節(jié)，都先給他點處罰，敲山震虎！
deep為true是告訴監(jiān)察院往深了查，看看有沒有什么人跟這個人聯(lián)絡了，聯(lián)絡以后又發(fā)生了事！
寫這篇文章的時候，我也在跟朋友探討watch和updated，updated也是在數(shù)據(jù)發(fā)生改變的時候做出相應，但是如果將updated說成是監(jiān)察院就感覺太嘍了！updated不能指定監(jiān)測數(shù)據(jù)，只要有數(shù)據(jù)發(fā)生變化就會指向updated中的方法，不管誰發(fā)生變化都會執(zhí)行，這么不靈活怎么能配的上監(jiān)察院這么厲害的特務機構(gòu)呢！嘻嘻！
總結(jié)
以上所述是小編給大家介紹的Vuejs中的watch實例詳解，希望對大家有所幫助！
相關(guān)文章
這篇文章主要介紹了詳解vue-cli下ESlint 配置說明，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-09-09
Vue中實現(xiàn)路由跳轉(zhuǎn)傳參的4種方式
本文詳盡的講了在Vue項目中,如何實現(xiàn)路由跳轉(zhuǎn)傳參的4四種方式（2大路由跳轉(zhuǎn)方式,每種方式包括4種路由傳參實現(xiàn)形式）,以及每種方式中實現(xiàn)路由跳轉(zhuǎn)包括路由傳參的方法的各種寫法,需要的朋友可以參考下2024-04-04
這篇文章主要為大家詳細介紹了Vue實現(xiàn)商品放大鏡效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-09-09
眾所周知,當容器高度固定而內(nèi)容部分高度超出容器高度時,瀏覽器會渲染出一個可以滾動并用于顯示剩余界面的條 -- 滾動條,它可以簡單的樣式修改,但是位置是固定的,無法移動,而我們需要改變位置的時候,它就不能滿足我們的需求了,這時我們可以自己手寫一個2023-10-10
vue 組件內(nèi)獲取actions的response方式
今天小編就為大家分享一篇vue 組件內(nèi)獲取actions的response方式，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-11-11
element?el-upload文件上傳覆蓋第一個文件的實現(xiàn)
這篇文章主要介紹了element?el-upload文件上傳覆蓋第一個文件的實現(xiàn)方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-03-03
這篇文章主要介紹了vue 中的 render 函數(shù)作用，通過實例代碼給大家介紹的非常詳細，具有一定的參考借鑒價值,需要的朋友可以參考下2020-02-02
這篇文章主要為大家詳細介紹Vue中$nextTick的實現(xiàn)原理，文中的示例代碼講解詳細，對我們深入了解Vue有一定的幫助，需要的小伙伴可以參考一下2023-06-06
這篇文章主要介紹了vue同個按鈕控制展開和折疊同個事件操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-07-07
在vue3項目開發(fā)中,我們常常會遇到父子組件相互調(diào)用的場景,下面主要以setup語法糖格式詳細聊聊父子組件那些事兒,并通過代碼示例介紹的非常詳細,具有一定的參考價值,需要的朋友可以參考下2024-05-05