Vue学习：13-计算属性

模板中的表达式虽然方便，但也只能用来做简单的操作；如果在模板中写太多逻辑，会让模板变得臃肿，难以维护；因此我们推荐使用计算属性来描述依赖响应式状态的复杂逻辑。

1. 选项式 API 中，可以提供computed选项来声明计算属性

2. 组合式 API 中，可以通过computed回调函数返回的值来声明计算属性

App.vue

<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 '老年'
  }
})

function getAgeState(n) {
  if(n < 18) {
    return '未成年'
  } else if(n < 35) {
    return '青年'
  } else if(n < 50) {
    return '中年'
  } else {
    return '老年'
  }
}

</script>

<!-- 视图区域（view） -->
<template>
   
  <div>
    年龄：<input type="number" v-model.lazy="age">
    <!-- 使用简单表达式 -->
    <h3>年龄阶段（简单）：{{ age<18?'未成年':'成年' }}</h3>
    <!-- 计算属性 -->
    <h3>年龄阶段（复杂）：{{ ageState }}</h3>
    <!-- 使用方法 -->
    <h3>年龄阶段（方法）：{{ getAgeState(age) }}</h3>
  </div>  
  
</template>

<style>
  
</style>

计算属性与方法的区别：

● 两种方式在结果上确实是完全相同的，不同之处在于计算属性值会基于其响应式依赖被缓存。

● 一个计算属性仅会在其响应式依赖更新时才重新计算。这意味着只要所依赖的数据源不改变，无论多少次访问计算属性都会立即返回先前的计算结果，而不用重复执行getter函数。

● 方法调用总是会在重新渲染发生时再次执行函数。

计算属性注意事项：

● 不要在计算函数中做异步请求或者更改DOM

● 避免直接修改计算属性值