最近剛剛追完慶余年，心思還總是在劇情里，然后就覺得在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實例詳解，希望對大家有所幫助！