一、handler方法和immdiate屬性

watch默認(rèn)綁定，頁面首次加載時(shí)，是不會(huì)執(zhí)行的。只有值發(fā)生改變才會(huì)執(zhí)行。

如果想立即執(zhí)行怎么辦？

1 watch:{
2     name:{
3       handler(newName,oldName){
4           //執(zhí)行代碼
5       },
6       immediate:true //true就表示會(huì)立即執(zhí)行
7     }
8 }

二、deep屬性

如果是監(jiān)聽的是對(duì)象類型，當(dāng)手動(dòng)修改對(duì)象的某個(gè)屬性時(shí)，發(fā)現(xiàn)是無效的。

這時(shí)候就需要deep屬性。

data:{
    obj:{
      a:1
    }
},
watch:{
    obj:{
      handler(newName,oldName){
          //執(zhí)行代碼
      },
      deep:true //為true，表示深度監(jiān)聽，這時(shí)候就能監(jiān)測(cè)到a值變化
    }
}

deep為true，就可以監(jiān)測(cè)到對(duì)象中每個(gè)屬性的變化。

它會(huì)一層層遍歷，給這個(gè)對(duì)象的所有屬性都加上這個(gè)監(jiān)聽器。但是這樣性能開銷會(huì)比較大，修改任何一個(gè)屬性，都會(huì)出發(fā)這個(gè)監(jiān)聽器里的handler.

三、deep優(yōu)化

可以使用字符串形式監(jiān)聽

data:{
    obj:{
      a:1
    }
},
watch:{
    'obj.a':{
      handler(newName,oldName){
          //執(zhí)行代碼
      },
      deep:true //為true，表示深度監(jiān)聽，這時(shí)候就能監(jiān)測(cè)到a值變化
    }
}

這樣vue就會(huì)一層層解析，知道遇到屬性a，然后才給a設(shè)置監(jiān)聽函數(shù)。

參考鏈接：https://juejin.im/post/5ae91fa76fb9a07aa7677543

總結(jié)

以上是生活随笔為你收集整理的vue中watch高级用法（deep和immediate）的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。