watch是監(jiān)視屬性。在vue中，可以通過watch屬性來監(jiān)視某個屬性的變化，當這個屬性發(fā)生變化時，可以執(zhí)行一些操作：1、當監(jiān)視屬性所監(jiān)視的屬性發(fā)生變化的時候，回調函數(shù)就會自動調用，并且執(zhí)行相關的操作；2、監(jiān)視屬性所監(jiān)視的屬性要存在，才能產生作用。監(jiān)視屬性有兩種寫法“new Vue({watch:{}})”和“vue實例化對象.$watch('屬性名'回調函數(shù))”。

本教程操作環(huán)境：windows7系統(tǒng)、vue3版，DELL G3電腦。

vue監(jiān)視屬性

在開發(fā)中，我們會遇到這樣一種情況，我們需要一個屬性變化的時候，然后做出一些操作。而檢測這個變化的屬性，在vue中叫做監(jiān)視屬性。

1.監(jiān)視屬性是什么

在vue中，我們可以通過watch屬性來監(jiān)視某個屬性的變化，當這個屬性發(fā)生變化時，我們可以執(zhí)行一些操作。

• 當監(jiān)視屬性所監(jiān)視的屬性發(fā)生變化的時候，回調函數(shù)（handler）就會自動調用，并且執(zhí)行相關的操作
• 監(jiān)視屬性所監(jiān)視的屬性要存在，才能產生作用。

我們這里用一個天氣案例來解釋什么是監(jiān)視屬性：

首先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屬性發(fā)生了變化");                 },             }         }     });

在代碼里面的handler這個函數(shù)就是我們前面說的回調函數(shù)，當isHot屬性發(fā)生變化的時候，這個函數(shù)就會自動調用。

當然我們可以在idHot對象面添加一個屬性：immediate，當此屬性布爾值為真的時候，handler回調函數(shù)在初始化的時候就會調用一次。

    watch: {         isHot: {             handler:function (newVal, oldVal) {                 console.log("isHot屬性發(fā)生了變化");             },             immediate: true         }     }

2.監(jiān)視屬性的寫法

監(jiān)視屬性有兩種寫法：

• 在vue實例化對象中直接書寫：
  new Vue({watch:{}}),然后傳入相關配置
• 通過vue實例化對象.$watch('屬性名'，回調函數(shù))來書寫

這里的第一種寫法上面我們已經(jīng)展現(xiàn)過了，下面我們就展示一下第二種寫法：

這里我們假設vue的實例化對象為vm。

    vm.$watch('isHot',function (newVal, oldVal) {         console.log("isHot屬性發(fā)生了變化");     });

3.監(jiān)視屬性之深度監(jiān)視

前面我們實現(xiàn)的監(jiān)視，只能監(jiān)視vue實例data中直接的簡單數(shù)據(jù)，要是遇到對象或者數(shù)組，就無法監(jiān)視了。

這樣做的方法是vue為了提高效率，在vue監(jiān)視屬性中，默認只監(jiān)視一層，如果要監(jiān)視多層，就需要我們手動開啟深度監(jiān)視。

    watch: {         isHot: {             handler:function (newVal, oldVal) {                 console.log("isHot屬性發(fā)生了變化");             },             immediate: true,             deep: true         }     }

其中deep:true就開啟了深度監(jiān)視。 深度監(jiān)視就是監(jiān)視vue中data中的對象或者數(shù)組，當對象或者數(shù)組中的屬性發(fā)生變化的時候，監(jiān)視屬性的回調函數(shù)就會自動調用。

在vue中其實是可以檢測對象內部值的變化，那為什么vue監(jiān)視屬性不默認開啟深度監(jiān)視呢？

因為vue監(jiān)視屬性的回調函數(shù)是在數(shù)據(jù)發(fā)生變化的時候才會調用，如果開啟深度監(jiān)視，那么vue就要監(jiān)視對象內部的所有屬性，這樣會大大降低vue的效率。

在我們使用監(jiān)視屬性的時候，我們根據(jù)具體的業(yè)務需求，來判斷要不要開啟深度監(jiān)視?！?/p>