vue 3 模板规范以“可读性+可预测性+可优化性”为核心，强调语义化结构、v-model 统一收口、性能敏感点优化及安全硬性约束，所有规则均为 ci 必检红线。
团队协作中，Vue 3 模板规范不是为了统一格式而设，而是为降低维护成本、避免运行时隐患、释放编译与响应式优化红利。核心是“可读性 + 可预测性 + 可优化性”三者兼顾。
语义化与结构清晰：从模板开始就讲人话
模板应像自然语言一样表达意图，而非堆砌指令：
- 用语义化 HTML 标签（header、main、nav），避免通篇 div
- 条件区块优先包裹在 中，不与 v-for 同级；避免 v-if 直接写在组件根标签上导致状态丢失
- 列表渲染必须带 :key，且 key 值来自唯一标识字段（如 item.id），禁用 index
- 长表达式一律提取为计算属性或方法，模板中只留简洁调用（如 {{ formattedTime }} 而非 {{ new Date(item.ts).toLocaleString() }}）
v-model 与双向绑定：统一收口，杜绝隐式耦合
自定义组件的 v-model 是团队最容易写出“黑盒逻辑”的地方，需强制约定：
- 单个 v-model 默认绑定 modelValue prop 和触发 update:modelValue 事件
- 多字段绑定使用显式参数语法：v-model:title + v-model:content，对应组件内声明 defineProps(['title', 'content']) 和 defineEmits(['update:title', 'update:content'])
- Vu3.4+ 项目推荐使用 defineModel() 简化写法，但需全团队同步升级并禁用旧式 emit 手动派发
- 禁止在模板中对 v-model 绑定值做就地转换（如 v-model="item.name.trim()"），应在数据层或 computed 中处理
性能敏感点：让编译器和响应式系统真正帮上忙
很多性能问题源于模板写法无意中关闭了 Vue 的优化开关：
- 静态 class 写死，动态 class 用对象语法：class="btn btn-primary" :class="{ 'is-loading': loading }"，避免全量字符串拼接
- 避免在 v-for 内部调用函数或访问深层嵌套属性（如 {{ user.profile.settings.theme }}），改用 computed 或 map 预处理
- 高频更新区域（如表格行、实时消息流）与低频区域（如页脚、配置面板）拆分为独立子组件，利用组件边界隔离响应式依赖
- 大数组（>1000项）用 shallowRef 或 shallowReactive，确保仅顶层变更触发更新，内部字段修改不扩散
安全与可维护底线：硬性约束不能妥协
这些不是建议，是上线前 CI 必须拦截的红线：
- v-html 只允许出现在白名单组件中（如富文本预览器），且内容必须经后端 XSS 过滤或前端 DOMPurify 处理；CI 中正则扫描禁止出现 v-html="userInput" 类写法
- 所有插值和属性绑定禁止直接使用未声明变量（如 {{ userInfo.name }} 前未校验 userInfo 是否存在），模板中用可选链 {{ userInfo?.name }} 或空值 fallback（{{ userInfo?.name || '-' }}）
- 禁止在模板中使用 console.log、debugger、eval、with 等调试/危险语法，CI 工具链自动检测并报错
- 组件 props 必须类型化，使用 defineProps() 显式声明，禁止 any / Object / {} 类型兜底
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
