vue中watch是什麼屬性

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的效率。

在我們使用監視屬性的時候，我們根據具體的業務需求，來判斷要不要開啟深度監視。【相關推薦：、】

以上就是vue中watch是什麼屬性的詳細內容，更多請關注TW511.COM其它相關文章！