1. 計算屬性定義

獲取計算屬性值

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

創建計算屬性

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

計算屬性賦值

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

2. 計算屬性案例

<template><!--在DOM元素調用變量時,不需要指定輸出變量的value,因為Vue會幫你輸出.value但是注意,這個幫助只會幫助頂級的ref屬性才會被解包--><div>{{ p.count }}</div><br><div>count是否大于0:{{ countPass0 }}</div><br><div>count是否大于0:{{ countPass0GetSet }}</div><br><button @click="countAdd">設置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()方法不會被執行,只有改變countPass0GetSet.value時才會執行set()set(newValue) {// newValue的值為countPass0GetSet.value的新值,p.count = newValue;console.log('計算屬性收到的新值:',newValue);},
});function countAdd(){countPass0GetSet.value=1
}
</script><style scoped>
</style>

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

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

避免直接修改計算屬性值?
從計算屬性返回的值是派生狀態。可以把它看作是一個“臨時快照”，每當源狀態發生變化時，就會創建一個新的快照。更改快照是沒有意義的，因此計算屬性的返回值應該被視為只讀的，并且永遠不應該被更改——應該更新它所依賴的源狀態以觸發新的計算。