Vue风格指南核心规范

Tue, 04 Mar 2025 07:00:27 +0000

考察点分析

组件命名：
- PascalCase命名防止与原生HTML标签冲突（如<Button> vs <button>）
- 多单词组件名确保全局唯一性（ES模块系统特性）
v-for键值：
- 虚拟DOM的Diff算法依赖key标识元素身份
- 索引作为key会导致状态错位（示例：动态列表删除中间项时）
Prop定义：
- 对象语法声明可触发编译时类型检查（Vue内部校验机制）
- required/validator配置强化接口约束力

Vue风格指南A级规范包括：

组件命名：必须使用多单词PascalCase命名（如TodoItem），避免与HTML元素冲突。单文件组件文件名推荐kebab-case（如todo-item.vue）。

v-for键值：必须为每项绑定唯一key（如:key="item.id"），禁用数组索引。确保虚拟DOM正确复用节点。

Prop定义：必须使用对象语法声明类型，示例：

 props: {
 status: {
 type: String,
 required: true,
 validator: v => ['success', 'fail'].includes(v)
 }
}

B级规范推荐：