站長資訊網
watch是監視屬性。在vue中，可以通過watch屬性來監視某個屬性的變化，當這個屬性發生變化時，可以執行一些操作：1、當監視屬性所監視的屬性發生變化的時候，回調函數就會自動調用，并且執行相關的操作；2、監視屬性所監視的屬性要存在，才能產生作用。監視屬性有兩種寫法“new Vue({watch:{}})”和“vue實例化對象.$watch('屬性名'回調函數)”。
本教程操作環境：windows7系統、vue3版，DELL G3電腦。
vue監視屬性
在開發中，我們會遇到這樣一種情況，我們需要一個屬性變化的時候，然后做出一些操作。而檢測這個變化的屬性，在vue中叫做監視屬性。
1.監視屬性是什么
在vue中，我們可以通過watch屬性來監視某個屬性的變化，當這個屬性發生變化時，我們可以執行一些操作。
- 當監視屬性所監視的屬性發生變化的時候，回調函數（handler）就會自動調用，并且執行相關的操作
- 監視屬性所監視的屬性要存在，才能產生作用。
我們這里用一個天氣案例來解釋什么是監視屬性：
首先html代碼：
<div id="app"> <p>今天天氣很{{info}}</p> <button v-on:click="change">切換天氣</button> </div>
接下來我們書寫js代碼：
var vm = new Vue({ el: "#app", data: { isHot: true, }, computed: { info: function () { return this.isHot ? "熱" : "冷"; } }, methods: { change: function () { this.isHot = !this.isHot; } }, watch: { isHot: { handler:function (newVal, oldVal) { console.log("isHot屬性發生了變化"); }, } } });
在代碼里面的handler這個函數就是我們前面說的回調函數，當isHot屬性發生變化的時候，這個函數就會自動調用。
當然我們可以在idHot對象面添加一個屬性：immediate，當此屬性布爾值為真的時候，handler回調函數在初始化的時候就會調用一次。
watch: { isHot: { handler:function (newVal, oldVal) { console.log("isHot屬性發生了變化"); }, immediate: true } }
2.監視屬性的寫法
監視屬性有兩種寫法：
- 在vue實例化對象中直接書寫：
new Vue({watch:{}}),然后傳入相關配置 - 通過
vue實例化對象.$watch('屬性名'，回調函數)來書寫
這里的第一種寫法上面我們已經展現過了，下面我們就展示一下第二種寫法：
這里我們假設vue的實例化對象為vm。
vm.$watch('isHot',function (newVal, oldVal) { console.log("isHot屬性發生了變化"); });
3.監視屬性之深度監視
前面我們實現的監視，只能監視vue實例data中直接的簡單數據，要是遇到對象或者數組，就無法監視了。
這樣做的方法是vue為了提高效率，在vue監視屬性中，默認只監視一層，如果要監視多層，就需要我們手動開啟深度監視。
watch: { isHot: { handler:function (newVal, oldVal) { console.log("isHot屬性發生了變化"); }, immediate: true, deep: true } }
其中deep:true就開啟了深度監視。 深度監視就是監視vue中data中的對象或者數組，當對象或者數組中的屬性發生變化的時候，監視屬性的回調函數就會自動調用。
在vue中其實是可以檢測對象內部值的變化，那為什么vue監視屬性不默認開啟深度監視呢？
因為vue監視屬性的回調函數是在數據發生變化的時候才會調用，如果開啟深度監視，那么vue就要監視對象內部的所有屬性，這樣會大大降低vue的效率。
在我們使用監視屬性的時候，我們根據具體的業務需求，來判斷要不要開啟深度監視。【
