在vue框架內,我們可以通過改變一個變數來改變另一個變數,這種方法就是通過計算屬性來達成的，
目錄
計算屬性 computed
依賴性
資料快取
計算屬性的setter
小結:
偵聽器 watch
計算屬性 computed
依賴性
計算屬性中定義的一個變數依賴另一個或多個變數值進行改變,當變數發生改變時計算屬性會重新進行運算并輸出新的值，
<template>
<div>
<input type="number" v-model.number="one" />
<input type="number" v-model.number="two" />
<h4>結果:{{ sum }}</h4>
</div>
</template>
<script>
export default {
data() {
return {
one: 2,
two: 4,
};
},
computed: {
sum() {
return this.one + this.two;
},
},
};
</script>當我們改變輸入框的值時,sum變數的值會實時發生變化,每次發生改變會重新運行計算屬性中的代碼,并將值重新賦給sum，
資料快取
當計算屬性內的代碼第一次運行時,計算出的結果會被快取起來,如果computed被多次呼叫但是資料并沒有發生改變則computed不會運行,會直接將快取的資料回傳，
<template>
<div>
<input type="number" v-model.number="one" />
<input type="number" v-model.number="two" />
<h4>結果:{{ sum }}</h4>
<h4>輸出:{{ sum }}</h4>
<h4>輸出:{{ sum }}</h4>
<button @click="Fn">點擊輸出值</button>
<h4>{{ sumFn }}</h4>
</div>
</template>
<script>
export default {
data() {
return {
one: 2,
two: 4,
sumFn: "",
};
},
computed: {
sum() {
return this.one + this.two;
},
},
methods: {
Fn() {
console.log("函式被呼叫了");
this.sumFn = this.one + this.two;
},
},
};
</script>這點與函式有很大不同,函式如果多次多次取值會被多次呼叫,盡管它的依賴值沒有任何變化
計算屬性依賴值未變化就不會重新呼叫，
計算屬性的setter
計算屬性默認是只有get屬性的（隱藏），而在完整寫法中，計算屬性是可以設定其他屬性的值的
用于更新其他屬性當屬性發生改變時會呼叫set函式
小結:
計算屬性有兩個特性
- 資料依賴(資料改變時呼叫重新賦值)
- 資料快取(資料不變時直接回傳快取)
偵聽器 watch
- 偵聽器與計算屬性的共同點就是在資料變化時呼叫，但是偵聽器沒有快取
- 偵聽器可以處理異步函式（比如獲取API）
- 當處理較大開銷時可以使用
- 大多數情況計算屬性更實用
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/339879.html
標籤：其他
下一篇：平凡的函式給出了意想不到的回傳值