Vuejs中的watch實(shí)例詳解(監(jiān)聽者)
最近剛剛追完慶余年，心思還總是在劇情里，然后就覺得在vuejs里watch就是監(jiān)察院，一個(gè)不折不扣的特務(wù)機(jī)構(gòu)。在Vue中watch被稱為監(jiān)聽者，它隨時(shí)觀察這vue實(shí)例中每一個(gè)數(shù)據(jù)的變化，當(dāng)數(shù)據(jù)發(fā)生改變，做出響應(yīng)。
通過(guò)下面的示例代碼來(lái)看一下這個(gè)監(jiān)察院是怎么運(yùn)作的：
new Vue({
el:"#app",
data(){
reutrn {
candy:""
}
},
//傳說(shuō)中的監(jiān)察院start
watch:{
candy:{
handler(newVal,oldVal){
},
immediate: true,
deep:true
}
}
//傳輸中的監(jiān)察院end
})
/***
watch中監(jiān)控這candy這個(gè)數(shù)據(jù)的變化，
handler中傳入了兩個(gè)參數(shù)：
newVal->是改變后的數(shù)據(jù)
oldVal->是改變前的數(shù)據(jù)
***/
按照慶余年的劇情分析，監(jiān)察院在監(jiān)控candy這個(gè)人，一旦candy發(fā)生變節(jié)，就會(huì)執(zhí)行handler中的操作，newVal和oldVal就好像是提供給監(jiān)察院人員來(lái)判斷如果candy是內(nèi)部斗爭(zhēng)還是叛國(guó)，根據(jù)情節(jié)處以什么樣的處罰。
代碼中 immediate 和 deep 又是什么意思呢？
immediate和deep像是慶帝給陳萍萍的指令：
immediate為true是告訴監(jiān)察院不管candy有沒有變節(jié)，都先給他點(diǎn)處罰，敲山震虎！
deep為true是告訴監(jiān)察院往深了查，看看有沒有什么人跟這個(gè)人聯(lián)絡(luò)了，聯(lián)絡(luò)以后又發(fā)生了事！
寫這篇文章的時(shí)候，我也在跟朋友探討watch和updated，updated也是在數(shù)據(jù)發(fā)生改變的時(shí)候做出相應(yīng)，但是如果將updated說(shuō)成是監(jiān)察院就感覺太嘍了！updated不能指定監(jiān)測(cè)數(shù)據(jù)，只要有數(shù)據(jù)發(fā)生變化就會(huì)指向updated中的方法，不管誰(shuí)發(fā)生變化都會(huì)執(zhí)行，這么不靈活怎么能配的上監(jiān)察院這么厲害的特務(wù)機(jī)構(gòu)呢！嘻嘻！
總結(jié)
以上所述是小編給大家介紹的Vuejs中的watch實(shí)例詳解，希望對(duì)大家有所幫助！
相關(guān)文章
vue實(shí)現(xiàn)富文本編輯器詳細(xì)過(guò)程
Vue富文本的實(shí)現(xiàn)可以使用一些現(xiàn)成的第三方庫(kù),如Quill、Vue-quill-editor、wangEditor等,這篇文章主要給大家介紹了關(guān)于vue實(shí)現(xiàn)富文本編輯器的相關(guān)資料,需要的朋友可以參考下2024-01-01
Vuejs實(shí)現(xiàn)帶樣式的單文件組件新方法
這篇文章主要為大家詳細(xì)為大家詳細(xì)介紹了Vuejs實(shí)現(xiàn)帶樣式的單文件組件的新方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-05-05
vue 動(dòng)態(tài)修改a標(biāo)簽的樣式的方法
這篇文章主要介紹了vue 動(dòng)態(tài)修改a標(biāo)簽的樣式的方法，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-01-01
本文給大家分享vue自定義指令拖拽功能及自定義鍵盤信息，非常不錯(cuò)，具有參考借鑒價(jià)值，需要的的朋友參考下2017-02-02
解決vue前端文件上傳報(bào)錯(cuò):上傳失敗,原因:413 Request Entity Too&
這篇文章主要介紹了解決vue前端文件上傳報(bào)錯(cuò):上傳失敗,原因:413 Request Entity Too Large,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-08-08
修改el-form-item中的label里面的字體邊距或者大小問題
這篇文章主要介紹了修改el-form-item中的label里面的字體邊距或者大小問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10
vue獲取元素寬、高、距離左邊距離,右,上距離等還有XY坐標(biāo)軸的方法
今天小編就為大家分享一篇vue獲取元素寬、高、距離左邊距離,右,上距離等還有XY坐標(biāo)軸的方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-09-09
下面小編就為大家分享一篇對(duì)vue.js中this.$emit的深入理解，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-02-02
Vuex模塊化實(shí)現(xiàn)待辦事項(xiàng)的狀態(tài)管理
本文主要介紹了Vuex模塊化實(shí)現(xiàn)待辦事項(xiàng)的狀態(tài)管理的相關(guān)知識(shí)，具有很好的參考價(jià)值，下面跟著小編一起來(lái)看下吧2017-03-03
這篇文章主要給大家介紹了關(guān)于vue路由教程之靜態(tài)路由的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家學(xué)習(xí)或者使用vue具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-09-09