computed 是处理 props 派生状态的最佳选择，因其具备缓存性与响应式依赖追踪；data 无法响应变化，methods 无缓存且每次渲染执行，watch 不适用于模板渲染值派生。
Vue.js 中，父组件通过 props 向子组件传递原始数据，而子组件若需对这些数据进行格式化、过滤、组合或逻辑转换，**不建议直接在模板中反复写表达式**，也不应修改 props（违反单向数据流）。此时，利用 computed 对 props 进行二次加工是最自然、高效且响应式的做法。
为什么用 computed 而不是 data 或 methods？
computed 具备缓存性与响应式依赖追踪：只要依赖的 props 不变，计算属性不会重复执行；一旦 props 更新，它自动重新求值并触发视图更新。相比之下：
- data 初始化后是静态快照，无法响应 props 变化；
- methods 每次渲染都执行，无缓存，可能造成性能浪费或意外副作用；
- watch 适合执行异步或开销大操作，但不直接用于模板渲染值的派生。
基础用法：对单个 prop 做格式化
例如父组件传入一个时间戳，子组件用 computed 转为可读日期：
子组件代码片段props: {
createTime: {
type: Number,
required: true
}
},
computed: {
formattedTime() {
return new Date(this.createTime).toLocaleString('zh-CN')
}
}
模板中直接使用 {{ formattedTime }}，简洁清晰，且随 createTime 变化实时更新。
立即学习“前端免费学习笔记（深入）”；
进阶场景：组合多个 props 构建派生状态
当需要依据多个 props 推导出新状态（如按钮是否禁用、标签文案、样式类名等），computed 是理想选择：
props: {
status: String, // 'pending' | 'success' | 'error'
isLoading: Boolean,
hasData: Boolean
},
computed: {
btnText() {
if (this.isLoading) return '处理中...'
if (this.status === 'success') return '已完成'
if (this.status === 'error') return '重试'
return this.hasData ? '提交' : '暂无数据'
},
isBtnDisabled() {
return this.isLoading || this.status === 'success'
}
}
这样把业务逻辑收拢在 computed 中，模板保持语义化和低耦合。
注意事项与边界提醒
- 避免在 computed 中修改 props 或 this 上的响应式数据（会产生警告，且破坏响应式链路）；
- 若加工逻辑复杂或含副作用（如请求、定时器），应移至 watch 或 methods；
- TypeScript 用户注意：computed 的返回类型会自动推导，但复杂对象建议显式标注以提升可维护性；
- Vue 3 Composition API 中，可用
computed(() => ...)实现同样效果，逻辑更内聚。
