vue 3 中 computed 定义只读计算属性：传入纯函数自动追踪响应式依赖，惰性求值、自动缓存、不可赋值，需通过 .value 读取（模板中可省略）。
在 Vue 3 中，用 computed 定义只读计算属性非常直接：传入一个返回值的函数，它会自动追踪内部使用的响应式数据（比如 ref 或 reactive 的属性），并在依赖变化时重新求值，且结果会被缓存。
基本写法：函数式调用
这是最常用的方式，适用于大多数场景：
- 从
vue导入computed和ref（或reactive） - 用
ref创建基础响应式数据 - 把一个箭头函数传给
computed()，函数体内访问并组合这些响应式值 - 得到的结果是一个只读的响应式引用，需通过
.value读取（在模板中可省略）
示例：
import { ref, computed } from 'vue'
<p>const price = ref(89)
const taxRate = ref(0.1)</p><p>// 只读计算属性：含税价
const totalPrice = computed(() => {
return price.value * (1 + taxRate.value)
})</p><p>// 模板中使用：{{ totalPrice }} → 自动显示 97.9
// 脚本中使用：totalPrice.value → 得到数值 97.9</p>关键行为要清楚
只读计算属性不是普通变量，它的响应式和缓存机制决定了你该怎么用：
-
不主动执行：定义时不运行，首次访问
.value时才计算（惰性求值） -
自动缓存：只要
price和taxRate都没变，多次读取totalPrice.value不会重复执行函数 -
响应式联动：任意依赖项变更（如
price.value = 100），totalPrice下次读取就会重新计算 -
不可赋值：写
totalPrice.value = 200会静默失败或报警告，因为它默认只读
搭配 reactive 使用也一样自然
如果数据结构较复杂，用 reactive 更合适，计算属性写法不变：
import { reactive, computed } from 'vue'
<p>const user = reactive({
firstName: '李',
lastName: '四'
})</p><p>const fullName = computed(() => <code>${user.firstName} ${user.lastName}</code>)
// 模板中 {{ fullName }} 会随 user.firstName 或 user.lastName 改变而更新</p>别在计算属性里做副作用
计算属性函数应是纯函数——只返回值，不修改状态、不发请求、不触发 alert。否则可能因缓存或执行时机导致意料外行为：
- ❌ 错误：在 getter 里调用
api.fetch()或console.log('run')（日志可能不按预期打印） - ✅ 正确：副作用放在事件处理函数或 watch 中；计算属性专注“算出一个值”
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
