说明

用于解决template模板中诸如三元运算符的条件过于复杂时导致模板臃肿和难以维护，所以可以采用计算属性

特点

1. 会自动追踪响应式依赖
2. 返回值为一个计算属性ref，需要通过.value访问
3. 计算属性值会基于其响应式依赖被缓存

EG

ts
<script setup>

const userinfo = reactive({
  age: 18,
})

// 一个计算属性 ref
const isMan = computed(() => {
  return userinfo > 18 ? '成年人' : '孩子'
})
</script>

<template>
  <span>{{ isMan }}</span>
</template>

配合TS使用

自动推导

计算属性会根据返回值的类型自动推导其类型

ts
<script setup>

const userinfo = reactive({
  age: 18,
})

// 自动推导类型为 globalThis.ComputedRef<"成年人" | "孩子">
const isMan = computed(() => {
  return userinfo.age > 18 ? '成年人' : '孩子'
})
</script>

<template>
  <span>{{ isMan }}</span>
</template>

泛型参数

通过computed<T>显示指定类型

<script setup>

const userinfo = reactive({
  age: 18,
})

// 自动推导类型为 globalThis.ComputedRef<string>
const isMan = computed<string>(() => {
  return userinfo.age > 18 ? '成年人' : '孩子'
})
</script>

<template>
  <span>{{ isMan }}</span>
</template>