模板中的表達式雖然方便，但也只能用來做簡單的操作；如果在模板中寫太多邏輯，會讓模板變得臃腫，難以維護；因此我們推薦使用計算屬性來描述依賴響應式狀態(tài)的復雜邏輯
1. 選項式 API 中，可以提供computed選項來聲明計算屬性
2. 組合式 API 中，可以通過computed回調函數返回的值來聲明計算屬性

計算屬性與方法的區(qū)別：
●兩種方式在結果上確實是完全相同的，不同之處在于計算屬性值會基于其響應式依賴被緩存。
●一個計算屬性僅會在其響應式依賴更新時才重新計算。這意味著只要所依賴的數據源不改變，無論多少次訪問計算屬性都會立即返回先前的計算結果，而不用重復執(zhí)行getter函數。
●方法調用總是會在重新渲染發(fā)生時再次執(zhí)行函數。

計算屬性注意事項：
●不要在計算函數中做異步請求或者更改DOM
●避免直接修改計算屬性值?

選項式代碼示例：

<script>
export default {data: () => ({age: 20, // 年齡birthday: '' // 生日}),// 計算屬性選項computed: {// 年齡階段ageState() {if (this.age < 18) {return '未成年'} else if (this.age < 35) {return '青年'} else if (this.age < 50) {return '中年'} else {return '老年'}},// 星座constellation() {// yyyy-MM-dd -> ['yyyy', 'MM', 'dd']let birArr = this.birthday.split('-')// 月份let month = parseInt(birArr[1])// 日份let day = parseInt(birArr[2])// 判斷switch (month) {case 1:if (day <= 19) {return '魔羯座'} else {return '水平座'}case 2:if (day <= 18) {return '水平座'} else {return '雙魚座'}case 3:if (day <= 20) {return '雙魚座'} else {return '白羊座'}case 4:if (day <= 19) {return '白羊座'} else {return '金牛座'}case 5:if (day <= 20) {return '金牛座'} else {return '雙子座'}case 6:if (day <= 21) {return '雙子座'} else {return '巨蟹座'}case 7:if (day <= 22) {return '巨蟹座'} else {return '獅子座'}case 8:if (day <= 22) {return '獅子座'} else {return '處女座'}case 9:if (day <= 22) {return '處女座'} else {return '天秤座'}case 10:if (day <= 23) {return '天秤座'} else {return '天蝎座'}case 11:if (day <= 22) {return '天蝎座'} else {return '射手座'}case 12:if (day <= 21) {return '射手座'} else {return '魔羯座'}default:return '請選擇日期'}}}
}
</script><template><div>年齡：<input type="number" v-model.lazy="age"><!-- 簡單的表達式 --><h3>年齡階段（簡單）：{{ age < 18 ? '未成年' : '成年' }} </h3><!-- 計算屬性：年齡階段 --><h3>年齡階段（復雜）：{{ ageState }} </h3></div><hr><div>生日：<input type="date" v-model="birthday"><!-- 計算屬性：星座 --><h3>星座：{{ constellation }}</h3></div></template>

組合式代碼示例：

<script setup>
import { computed, ref } from 'vue'let age = ref(20) // 年齡// 計算屬性：年齡階段
let ageState = computed(() => {if (age.value < 18) {return '未成年'} else if (age.value < 35) {return '青年'} else if (age.value < 50) {return '中年'} else {return '老年'}
})let birthday = ref('') // 生日// 計算屬性：星座
let constellation = computed(() => {// yyyy-MM-dd -> ['yyyy', 'MM', 'dd']let birArr = birthday.value.split('-')// 月份let month = parseInt(birArr[1])// 日份let day = parseInt(birArr[2])// 判斷switch (month) {case 1:if (day <= 19) {return '魔羯座'} else {return '水平座'}case 2:if (day <= 18) {return '水平座'} else {return '雙魚座'}case 3:if (day <= 20) {return '雙魚座'} else {return '白羊座'}case 4:if (day <= 19) {return '白羊座'} else {return '金牛座'}case 5:if (day <= 20) {return '金牛座'} else {return '雙子座'}case 6:if (day <= 21) {return '雙子座'} else {return '巨蟹座'}case 7:if (day <= 22) {return '巨蟹座'} else {return '獅子座'}case 8:if (day <= 22) {return '獅子座'} else {return '處女座'}case 9:if (day <= 22) {return '處女座'} else {return '天秤座'}case 10:if (day <= 23) {return '天秤座'} else {return '天蝎座'}case 11:if (day <= 22) {return '天蝎座'} else {return '射手座'}case 12:if (day <= 21) {return '射手座'} else {return '魔羯座'}default:return '請選擇日期'}
})
</script><template><div>年齡：<input type="number" v-model.lazy="age"><!-- 簡單的表達式 --><h3>年齡階段（簡單）：{{ age < 18 ? '未成年' : '成年' }} </h3><!-- 計算屬性 --><h3>年齡階段（復雜）：{{ ageState }} </h3></div><hr><div>生日：<input type="date" v-model="birthday"><h3>星座：{{ constellation }}</h3></div>
</template>

?

?