computed() 创建计算属性
最后更新：2026-10-22
computed() 创建计算属性
computed() 根据其他响应式数据推导出一个新值，结果会被缓存：只有依赖变化时才重新计算。
| 分组 | 响应式·核心 |
|---|---|
| 类型 | API |
| 作用域 | 组件内 |
| Vue 版本 | 3.0+ |
| SSR 支持 | 支持 |
📝 语法
const doubled = computed(() => count.value * 2)
// 可写计算属性
const full = computed({
get: () => first.value + " " + last.value,
set: (v) => { [first.value, last.value] = v.split(" ") }
})⚙️ 参数
| getter | 取值函数（或含 get/set 的对象），在其中读取其他响应式数据 |
|---|
返回值：只读（或可写）的 ComputedRef 对象
▶ 示例
修改下面的代码，在预览区实时查看效果：
输出：
默认显示「合计：20 元」；修改任一输入框，合计立即重算。💡 要点
💡 提示 有缓存：多个地方用同一个 computed，只算一次；而 methods 每次渲染都会重新执行。
⚠️ 注意 computed 的 getter 里不要写副作用（如发请求、改其他状态），那是 watch 的职责。
ℹ️ 说明 只依赖真实响应式来源才有效：依赖里没有响应式数据时，结果永远不会更新。
🏷️ 相关核心
💡 相关案例
更多案例即将上线。
📚 相关教程
❓ 常见问题
Q computed 和 methods 该用哪个？
A 基于响应式数据做推导、且结果可复用 → computed（有缓存）；带参数、需要每次执行（如事件处理）→ 普通函数。
Q 能直接给 computed 赋值吗？
A 默认只读，赋值会得到警告。需要可写就用 { get, set } 形式。
Q computed 里能写异步代码吗？
A 不能：computed 必须同步返回值，异步派生逻辑应改用 watch + ref。
