vue中watch高級用法（deep和immediate）

一、handler方法和immdiate屬性

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

如果想立即執行怎么辦？

watch:{
    name:{
      handler(newName,oldName){
          //執行代碼
      },
      immediate:true //true就表示會立即執行
    }
}

 

二、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