這篇文章帶大家認識Vue中的computed 和 watch,介紹一下computed 和 watch的差別,希望對大家有幫助。
1、用途:計算出來的屬性就是計算屬性
2、計算屬性的好處:它可以讓一些是根據其他屬性計算而來的屬性變成一個屬性
#computed有一個依賴快取,如果computed的依賴屬性沒有變化,那麼computed就不會重新計算。如果一個數據依賴其他數據,那麼把這個數據設計成 computed。 【相關推薦:《vue.js教學》】
範例(使用者名稱展示):
Vue.config.productionTip = false; new Vue({ data: { user: { email: "jade@qq.com", nickname: "jade", phone: "18810661088" } }, computed: { displayName: { get() { const user = this.user; return user.nickname || user.email || user.phone; }, set(value) { console.log(value); this.user.nickname = value; } } }, // DRY don't repeat yourself // 不如用 computed 来计算 displayName template: ` <div> {{displayName}} <div> {{displayName}} <button @click="add">set</button> </div> </div> `, methods: { add() { console.log("add"); this.displayName = "圆圆"; } } }).$mount("#app");
3、快取:
如果依賴的屬性沒有變化,就不會重新計算getter/setter
預設不會做緩存,Vue做了特殊處理
如何快取?可參考以下範例:
#1、用途:當資料變更時,執行函數,watch是完美實作歷史功能的一個函數(方法)
範例(撤銷):
import Vue from "vue/dist/vue.js"; Vue.config.productionTip = false; new Vue({ data: { n: 0, history: [], inUndoMode: false }, watch: { n: function(newValue, oldValue) { console.log(this.inUndoMode); if (!this.inUndoMode) { this.history.push({ from: oldValue, to: newValue }); } } }, // 不如用 computed 来计算 displayName template: ` <div> {{n}} <hr /> <button @click="add1">+1</button> <button @click="add2">+2</button> <button @click="minus1">-1</button> <button @click="minus2">-2</button> <hr/> <button @click="undo">撤销</button> <hr/> {{history}} </div> `, methods: { add1() { this.n += 1; }, add2() { this.n += 2; }, minus1() { this.n -= 1; }, minus2() { this.n -= 2; }, undo() { const last = this.history.pop(); this.inUndoMode = true; console.log("ha" + this.inUndoMode); const old = last.from; this.n = old; // watch n 的函数会异步调用 this.$nextTick(() => { this.inUndoMode = false; }); } } }).$mount("#app");
加了immediate: true
,一次渲染的時候會觸發watch
Vue.config.productionTip = false; new Vue({ data: { n: 0, obj: { a: "a" } }, template: ` <div> <button @click="n += 1">n+1</button> <button @click="obj.a += 'hi'">obj.a + 'hi'</button> <button @click="obj = {a:'a'}">obj = 新对象</button> </div> `, watch: { n() { console.log("n 变了"); }, obj:{ handler(){ console.log("obj 变了"); }, deep:true }, "obj.a": function() { console.log("obj.a 变了"); } } }).$mount("#app");
上箭頭函數的外層的函數是全域作用域,全域作用域的this就是全域物件window/global,所以你無法在這裡取得this.n/this.xxx,所以,watch裡面是絕對不能用箭頭函數的
vm.$watch('xxx',fn,{deep:...,immediate:...})
deep:true是做什麼的?
object.a變了,請問
object#算不算也變了
如果需要答案是【也變了】,就用
deep:true如果需要答案是【沒有變】,就用
deep:false
deep就是往不往裡面去看,去深入的看,
true就是深入進入看,預設是
false(只看表層的位址)。
obj的位址,而且要比較裡面任何一個資料變了,都要認為是
obj變了。
:就是計算屬性的意思
:就是監聽的意思
支援非同步程式碼而
computed不行
#computed這個值在呼叫的時候,不需要加括號,它會根據依賴自動緩存,就是說如果依賴不變,這個
computed的值就不會再計算。
watch它有兩個選項,第一個是
immediate,表示在第一次執行時要渲染這個函數;另一個是
deep ,意思是如果我們要監聽一個對象,是否要看它裡面屬性的變化。
computed;
watch來觀察這個資料的變化。
computed和
watch的差別。
程式設計入門! !
以上是認識Vue中的computed 和 watch,聊聊它們的差別的詳細內容。更多資訊請關注PHP中文網其他相關文章!