watch是監視屬性。在vue中,可以透過watch屬性來監視某個屬性的變化,當這個屬性發生變化時,可以執行一些操作:1、當監視屬性所監視的屬性發生變化的時候,回調函數就會自動調用,並且執行相關的操作;2、監視屬性所監視的屬性要存在,才能產生作用。監視屬性有兩種寫法「new Vue({watch:{}})」和「vue實例化物件.$watch('屬性名'回呼函數)」。
本教學操作環境:windows7系統、vue3版,DELL G3電腦。
在開發中,我們會遇到這樣一種情況,我們需要一個屬性變化的時候,然後做出一些操作。而偵測這個變化的屬性,在vue中叫做監視屬性。
1.監視屬性是什麼
在vue中,我們可以透過watch屬性來監視某個屬性的變化,當這個屬性當發生變化時,我們可以執行一些操作。
我們這裡用一個天氣案例來解釋什麼是監視屬性:
首先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.監視屬性的寫法
#監視屬性有兩種寫法:
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的效率。
在我們使用監視屬性的時候,我們根據具體的業務需求,來判斷要不要開啟深度監視。 【相關推薦:vuejs影片教學、web前端開發】
以上是vue中watch是什麼屬性的詳細內容。更多資訊請關注PHP中文網其他相關文章!