前言

前面講到了計算屬性computed，這次講的是監控器watch，主要任務就是監控變量的變化

正文

watch是一個對象，鍵是需要觀察的表達式，值是對應回調函數。值也可以是方法名，或者包含選項的對象。

watch的特點：

1.當變量變化時調用函數
2.如果不設置immediate則在初始綁定值時不會執行

watch有兩個選項：

1.deep選項：表示深層遍歷，當需要監控對象內部值的變化時，可以在選項參數中指定 deep: true。注意監聽數組的變動不需要這么做

2.immediate選項：如果在選項參數中指定 immediate: true，將立即觸發監控中變量的函數（如果我們需要在最初綁定值的時候也執行監控函數，就需要用到immediate屬性）

?watch的簡單用法：

watch:{// 監聽stuName的變化情況stuName: function(newVal, oldVal){//stuName是數組變量，newVal是屬性變化后的值，oldVal是屬性變化前的值 console.log(newVal,oldVal);} }

?

watch中的鍵也可以是$route之類的的實例屬性：

watch: {'$route': function(newVal, oldVal){console.log(newVal,oldVal);} }

?

watch對象的值也可以是方法名：

watch: {dataName: 'getPath' }， methods: {getPath:function(){} }

?

當watch監控對象時有兩種方法：

方法一：（在只監控對象內某一屬性變化時使用）

watch:{'obj.a':{ //加引號監聽對象里的屬性 handler(newValue,oldValue){console.log('obje changed')}} }

?

方法二：（當需要監控對象的所有屬性變化時使用）

watch:{obj:{handler(newValue,oldValue){//此函數名是vue提供的console.log('obje changed')},deep:true} }

?

本文原創，轉載請注明出處：https://www.cnblogs.com/zhangdongya/p/11304223.html?

轉載于:https://www.cnblogs.com/zhangdongya/p/11304223.html

總結

以上是生活随笔為你收集整理的Vue监控器watch的全面解析的全部內容，希望文章能夠幫你解決所遇到的問題。

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