Vue2 前端编码风格

Vue2 前端编码风格

技术栈基线（HIS_Main_WEB/package.json）

• Vue 2.7.16（不是 Vue 3！请用 Options API + Vue2 语法，不要用 <script setup>、defineProps、createApp 等 Vue3 写法）
• Vue Router 3 / Vuex 3
• Element UI 2.15.14（不是 Element Plus）
• 构建工具：Webpack 3 + 自定义 build/webpack.*.conf.js（非 Vue CLI / 非 Vite）
• 微前端：@micro-zoe/micro-app 0.8.11
• 样式：Sass（node-sass + sass-loader），图标等用现有体系。
• 辅助库：lodash 4、dayjs、moment、vxe-table 3.7.9、echarts 4、axios 0.15。

重要：因为仍是 Vue2，所有组件用 Options API（data/methods/computed/watch/mounted）。可在 Vue2.7 中使用 Composition API 的 <script setup> 风格仅当该文件已经是该风格；新代码默认跟随所在目录的既有风格，不擅自混用。

组件规范

命名

• 组件文件名与注册名：PascalCase，如 RegDetail.vue、ChargeEdit.vue。
• 组件名用多词，避免与 HTML 元素冲突（如 RegDetail 而非 Reg）。
• props：camelCase 声明，模板中 kebab-case 传递（<reg-detail :patient-id="id" />）。

Props

• 必须声明 type；引用类型（Object/Array）默认值用工厂函数 default: () => ({})。
• 必填用 required: true，并对非法值做防御。
• 用 validator 限定枚举取值。

// Do
props: {
  patientId: { type: [String, Number], required: true },
  mode: { type: String, default: 'view', validator: v => ['view','edit'].includes(v) },
  config: { type: Object, default: () => ({}) }
}

data

• 必须是函数 data() { return {...} }，不要写成对象（组件复用会共享状态）。

生命周期

• 主动清理副作用：全局事件、定时器、watch、第三方实例，在 beforeDestroy/destroyed 中解绑/销毁。
• 弹窗类组件用完后重置 data，避免下次打开残留状态。

v-for / key

• v-for 必须绑定稳定且唯一的 key，禁止用 index 作 key（尤其在含输入框、可增删的列表）。

v-if / v-show

• 频繁切换用 v-show；条件一次性用 v-if。
• 不要 v-for 和 v-if 写在同一元素上（Vue2 中 v-for 优先级高于 v-if，会带来困惑与性能问题）。

注释与命名（继承 STANDARD.md）

• 注释中文，遵循 00-global/response-language.md。
• 变量/函数 camelCase；常量 UPPER_SNAKE_CASE；私有以 _ 开头。
• 布尔变量 is/has 开头。
• 详见项目内 STANDARD.md（注释、命名、三元、短路等通用约定）。

样式

• 组件样式加 scoped，避免全局污染；确需全局的集中到公共样式文件。
• 深层选择器用 ::v-deep（Vue2 + node-sass 体系）而非 :deep()（那是 Vue3）。
• 颜色/间距等用既有变量或 Element UI 主题变量，避免散落魔法值。

路由与权限

• 路由按模块分文件；新增页面同步注册路由，并配置 meta（title、权限标识）。
• 权限路由走现有权限体系，不要在组件里硬编码"是否显示"。

性能

• 大数据表格用 vxe-table 虚拟滚动，不要用普通 el-table 渲染上万行。
• 频繁触发的事件（输入、滚动、resize）做防抖/节流。
• 重计算用 computed 缓存，不要在模板里写复杂方法调用。