Vuejs中的watch實例詳解(監(jiān)聽者)
最近剛剛追完慶余年，心思還總是在劇情里，然后就覺得在vuejs里watch就是監(jiān)察院，一個不折不扣的特務(wù)機構(gòu)。在Vue中watch被稱為監(jiān)聽者，它隨時觀察這vue實例中每一個數(shù)據(jù)的變化，當(dāng)數(shù)據(jù)發(fā)生改變，做出響應(yīng)。
通過下面的示例代碼來看一下這個監(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)絡(luò)了，聯(lián)絡(luò)以后又發(fā)生了事！
寫這篇文章的時候，我也在跟朋友探討watch和updated，updated也是在數(shù)據(jù)發(fā)生改變的時候做出相應(yīng)，但是如果將updated說成是監(jiān)察院就感覺太嘍了！updated不能指定監(jiān)測數(shù)據(jù)，只要有數(shù)據(jù)發(fā)生變化就會指向updated中的方法，不管誰發(fā)生變化都會執(zhí)行，這么不靈活怎么能配的上監(jiān)察院這么厲害的特務(wù)機構(gòu)呢！嘻嘻！
總結(jié)
以上所述是小編給大家介紹的Vuejs中的watch實例詳解，希望對大家有所幫助！
相關(guān)文章
Vue富文本的實現(xiàn)可以使用一些現(xiàn)成的第三方庫,如Quill、Vue-quill-editor、wangEditor等,這篇文章主要給大家介紹了關(guān)于vue實現(xiàn)富文本編輯器的相關(guān)資料,需要的朋友可以參考下2024-01-01
這篇文章主要為大家詳細為大家詳細介紹了Vuejs實現(xiàn)帶樣式的單文件組件的新方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-05-05
這篇文章主要介紹了vue 動態(tài)修改a標(biāo)簽的樣式的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-01-01
本文給大家分享vue自定義指令拖拽功能及自定義鍵盤信息，非常不錯，具有參考借鑒價值，需要的的朋友參考下2017-02-02
解決vue前端文件上傳報錯:上傳失敗,原因:413 Request Entity Too&
這篇文章主要介紹了解決vue前端文件上傳報錯:上傳失敗,原因:413 Request Entity Too Large,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-08-08
修改el-form-item中的label里面的字體邊距或者大小問題
這篇文章主要介紹了修改el-form-item中的label里面的字體邊距或者大小問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10
vue獲取元素寬、高、距離左邊距離,右,上距離等還有XY坐標(biāo)軸的方法
今天小編就為大家分享一篇vue獲取元素寬、高、距離左邊距離,右,上距離等還有XY坐標(biāo)軸的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
下面小編就為大家分享一篇對vue.js中this.$emit的深入理解，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-02-02
本文主要介紹了Vuex模塊化實現(xiàn)待辦事項的狀態(tài)管理的相關(guān)知識，具有很好的參考價值，下面跟著小編一起來看下吧2017-03-03
這篇文章主要給大家介紹了關(guān)于vue路由教程之靜態(tài)路由的相關(guān)資料，文中通過示例代碼介紹的非常詳細，對大家學(xué)習(xí)或者使用vue具有一定的參考學(xué)習(xí)價值，需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧2019-09-09