Vue2 规范

代码风格

代码风格主要采用官方推荐的风格

Vue 风格指南

除主要的必要性的风格之外，需要对项目进行封装，以下几种情况都需要单独封装，避免代码冗余

• 请求类 api 封装
  所有的请求必须对其进行二次封装，比如我们常用的 axios，封装要考其简易性、通用性、扩展性
• 组件类封装
  UI 组件类封装主要讲就的是一个原则，数据驱动

    通过外部数据来改变内部形态，要做异常处理

• 工具类封装
  像我们大多数应用有封装过类似的 js/ts 工具，主要处理一些常用的数据，像 day.js、format.js 等等之类的，遵守纯函数

组件规范

组件命名

• 组件名应该始终使用多个单词，避免与 HTML 元素冲突
• 单文件组件文件名推荐使用 PascalCase

✅ 推荐：TodoItem.vue、UserProfile.vue
❌ 不推荐：Todo.vue、myComponent.vue

组件选项顺序

在 Vue2 中，组件选项按以下顺序排列：

export default {
  name: "ComponentName", // 1. 组件名称
  components: {}, // 2. 子组件
  mixins: [], // 3. 混入（尽量少用）
  props: {}, // 4. Props
  data() {}, // 5. 数据
  computed: {}, // 6. 计算属性
  watch: {}, // 7. 侦听器
  // 8. 生命周期钩子（按执行顺序）
  beforeCreate() {},
  created() {},
  beforeMount() {},
  mounted() {},
  beforeUpdate() {},
  updated() {},
  beforeDestroy() {},
  destroyed() {},
  methods: {}, // 9. 方法
};

Props 规范

Props 必须使用详细的定义方式，指定类型、默认值和验证：

// 推荐
props: {
  title: {
    type: String,
    required: true,
  },
  count: {
    type: Number,
    default: 0,
  },
  userList: {
    type: Array,
    default: () => [],
  },
  config: {
    type: Object,
    default: () => ({}),
  },
}

// 不推荐
props: ['title', 'count', 'userList']

模板规范

指令缩写

统一使用指令缩写：

<!-- 推荐 -->
<input :value="name" @input="handleInput" />

<!-- 不推荐 -->
<input v-bind:value="name" v-on:input="handleInput" />

v-for 与 v-if

永远不要同时在一个元素上使用 v-for 和 v-if：

<!-- 推荐：在 computed 中过滤 -->
<li v-for="user in activeUsers" :key="user.id">{{ user.name }}</li>

<!-- 不推荐 -->
<li v-for="user in users" :key="user.id" v-if="user.isActive">
  {{ user.name }}
</li>

v-for 必须设置 key

<!-- 推荐：使用唯一 id -->
<div v-for="item in list" :key="item.id">{{ item.name }}</div>

<!-- 不推荐：使用 index -->
<div v-for="(item, index) in list" :key="index">{{ item.name }}</div>

样式规范

1. 组件样式使用 scoped 防止样式污染
2. 需要覆盖子组件样式时使用 /deep/ 或 ::v-deep

<style scoped lang="scss">
.container {
  padding: 16px;
}

/* 深度选择器 */
::v-deep .el-input {
  width: 200px;
}
</style>

状态管理（Vuex）

// store/modules/user.js
const state = {
  userInfo: null,
  token: "",
};

const mutations = {
  SET_USER_INFO(state, data) {
    state.userInfo = data;
  },
  SET_TOKEN(state, token) {
    state.token = token;
  },
};

const actions = {
  async login({ commit }, { username, password }) {
    const res = await loginApi({ username, password });
    commit("SET_TOKEN", res.token);
    commit("SET_USER_INFO", res.userInfo);
  },
  logout({ commit }) {
    commit("SET_TOKEN", "");
    commit("SET_USER_INFO", null);
  },
};

export default {
  namespaced: true,
  state,
  mutations,
  actions,
};

Vue2 项目升级建议

如果条件允许，建议逐步将 Vue2 项目迁移到 Vue3，以获得更好的 TypeScript 支持、Composition API 和性能提升。 详见 Vue3 规范