1. 計算屬性定義

獲取計算屬性值

<div>{{ 計算屬性名稱}}</div>

創(chuàng)建計算屬性

let 定義的屬性=ref/reactive....let 計算屬性名稱 = computed(() => {//這里寫函數(shù)式,函數(shù)式里面包含定義屬性//只有這個包含的定義屬性被修改時才出發(fā)此函數(shù)式//通過計算屬性名稱countPass0,返回函數(shù)式的值return 函數(shù)式;
});let 計算屬性名稱 = computed({// getterget() {//這里寫函數(shù)式,函數(shù)式里面包含定義屬性//只有這個包含的定義屬性被修改時才出發(fā)此函數(shù)式//通過計算屬性名稱countPass0,返回函數(shù)式的值return 函數(shù)式;},// setterset(newValue) {// get方法中包含的定義屬性// newValue為計算屬性名稱.value獲取的值定義屬性=newValue},
});

計算屬性賦值

計算屬性名稱.value=給與計算屬性的值

2. 計算屬性案例

<template><!--在DOM元素調(diào)用變量時,不需要指定輸出變量的value,因為Vue會幫你輸出.value但是注意,這個幫助只會幫助頂級的ref屬性才會被解包--><div>{{ p.count }}</div><br><div>count是否大于0:{{ countPass0 }}</div><br><div>count是否大于0:{{ countPass0GetSet }}</div><br><button @click="countAdd">設(shè)置count等于1</button>
</template>
<script setup>
//從vue中獲取ref方法
import { computed, reactive } from "vue";name: "App";
let p = reactive({count: 0,
});//定義計算屬性countPass0判斷p.count是否大于0
let countPass0 = computed(() => {return p.count > 0 ? "是" : "否";
});//定義計算屬性countPass0GetSet判斷p.count是否大于0()
let countPass0GetSet = computed({// getterget() {return p.count > 0 ? "是" : "否";},// setter// 在直接修改p.count的情況下set()方法不會被執(zhí)行,只有改變countPass0GetSet.value時才會執(zhí)行set()set(newValue) {// newValue的值為countPass0GetSet.value的新值,p.count = newValue;console.log('計算屬性收到的新值:',newValue);},
});function countAdd(){countPass0GetSet.value=1
}
</script><style scoped>
</style>

3. 計算屬性與方法區(qū)別
說白了方法每次執(zhí)行都會被調(diào)用,而計算屬性只有內(nèi)部屬性值被改變的時候才會被調(diào)用
let countPass0 = computed(() => Date.now());
這個計算屬性永遠不會被調(diào)用,因為里面不包含任何定義的屬性,所以不會觸發(fā)countPass0這個計算屬性

4.其他
Getter 不應(yīng)有副作用?
計算屬性的 getter 應(yīng)只做計算而沒有任何其他的副作用，這一點非常重要，請務(wù)必牢記。舉例來說，不要改變其他狀態(tài)、在 getter 中做異步請求或者更改 DOM！一個計算屬性的聲明中描述的是如何根據(jù)其他值派生一個值。因此 getter 的職責(zé)應(yīng)該僅為計算和返回該值。在之后的指引中我們會討論如何使用偵聽器根據(jù)其他響應(yīng)式狀態(tài)的變更來創(chuàng)建副作用。

避免直接修改計算屬性值?
從計算屬性返回的值是派生狀態(tài)?？梢园阉醋魇且粋€“臨時快照”，每當(dāng)源狀態(tài)發(fā)生變化時，就會創(chuàng)建一個新的快照。更改快照是沒有意義的，因此計算屬性的返回值應(yīng)該被視為只讀的，并且永遠不應(yīng)該被更改——應(yīng)該更新它所依賴的源狀態(tài)以觸發(fā)新的計算。