一、handler方法和immdiate屬性

watch默認綁定，頁面首次加載時，是不會執行的。只有值發生改變才會執行。

如果想立即執行怎么辦？

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

二、deep屬性

如果是監聽的是對象類型，當手動修改對象的某個屬性時，發現是無效的。

這時候就需要deep屬性。

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

deep為true，就可以監測到對象中每個屬性的變化。

它會一層層遍歷，給這個對象的所有屬性都加上這個監聽器。但是這樣性能開銷會比較大，修改任何一個屬性，都會出發這個監聽器里的handler.

三、deep優化

可以使用字符串形式監聽

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

這樣vue就會一層層解析，知道遇到屬性a，然后才給a設置監聽函數。

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

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。