computed属性适合日期格式化和表单预处理，自动响应依赖、缓存结果；不可用于异步或副作用操作，Vue 3中可用computed()函数实现相同功能。
Vue.js 的 computed 属性非常适合做日期格式化和表单数据预处理——它自动响应依赖变化、缓存结果、逻辑清晰，比在模板中写表达式或频繁调用 methods 更高效可靠。
用 computed 格式化日期（如显示“2024-05-20”或“5月20日 周一”）
直接在模板中拼接日期易出错、难复用；用 methods 每次渲染都执行，不必要。computed 则只在依赖的日期值变化时重新计算，且结果自动缓存。
示例：将 this.rawDate（如 Date 实例或 ISO 字符串）转为中文短格式：
- 在组件 data 中定义原始日期：rawDate: new Date() 或 rawDate: '2024-05-20T08:30:00Z'
- 在 computed 中声明格式化结果：
formattedDate() {
const d = new Date(this.rawDate);
return `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, '0')}-${String(d.getDate()).padStart(2, '0')}`;
} - 模板中直接使用：{{ formattedDate }} —— 无需加括号，也不用 watch 监听
用 computed 预处理表单数据（如合并字段、脱敏、默认值填充）
用户输入常需二次加工才能提交（如手机号加区号、姓名首字母大写、空值转 null）。把这类逻辑放在 computed 中，能保持 data 纯净，同时让提交数据 ready-to-use。
Springboot Vue Builder
下载
从零开始编排 SpringBoot+Vue 全栈项目工作流，适用于新建全栈项目或完整脚手架请求，触发后依次调用 product‑spec‑builder（需求调研）等模块。
立即学习“前端免费学习笔记（深入）”；
示例：表单含 firstName 和 lastName，需提交完整姓名 fullName，且空格自动清理：
- data 中保留原始输入：firstName: '', lastName: ''
- computed 中生成加工后字段：
fullName() {
const first = (this.firstName || '').trim();
const last = (this.lastName || '').trim();
return first || last ? `${first} ${last}`.trim() : null;
} - 提交时直接取 this.fullName，已去空格、防全空、兼容 null
注意边界：computed 不适合异步或副作用操作
computed 必须是同步、无副作用的纯函数。不能在里面发请求、修改 this.data、调用 alert 等。
- ❌ 错误：在 computed 里调用 api.getUser() 或 this.loading = true
- ✅ 正确：异步逻辑放 methods 或 setup 中的 onMounted；副作用（如日志、DOM 更新）用 watch
- ⚠️ 小技巧：若需“响应式格式化 + 异步 fallback”，可搭配 watch + data 字段，computed 仅负责最终展示值
组合式 API 中的等价写法（Vue 3）
在 setup() 或 script setup 中，用 computed() 函数替代选项式写法：
- 导入：import { computed } from 'vue'
- 声明：const formattedDate = computed(() => { /* 同上逻辑 */ })
- 模板中仍用 {{ formattedDate }}，响应式行为完全一致
- 多个相关 computed 可提取为自定义 Hook（如 useFormattedDate(rawDateRef)），提升复用性
