导航

基础代码规范

一个良好的命名规范能够在绝大多数中改善可读性和开发体验

命名规范

组件命名

文件命名采用小驼峰命名法，组成部分要精练有意义。公共组件采用大驼峰命令法

# 正常/业务组件命名
person.vue
personDetail.vue
user.vue
userDetail.vue

# 公共组件
HAView.vue
HALayout.vue

组件使用时不能出现大写字母，应使用小写配合连字符

// bad
<HaView title="title" />
// good
<ha-view title="title" />

Props 命名

camelCase (小驼峰式)：userName, initialValue
避免使用 DOM 属性命名

方法命名

camelCase：getUserInfo(), handleClick()
常用前缀：
- handle - 处理用户交互：handleSubmit()
- fetch - 获取数据：fetchUserData()
- show - 显示某些内容：showModal()
- toggle - 切换状态：toggleMenu()

自定义事件命名

kebab-case (短横线连接)：user-updated, form-submitted
建议使用动词或动词短语：close-modal, upload-success

指令命名

小写字母：v-loading, v-focus
自定义指令应使用 v- 前缀

变量命名

camelCase：userData, isLoading
布尔值使用 is, has, can 等前缀：isVisible, hasPermission

常量命名

全大写 + 下划线：MAX_COUNT, API_URL

其他

避免使用 $ 和 _ 前缀，这些在 Vue 生态中有特殊含义

文件编写顺序

Template-Script-Style 顺序

规范：按 <template>→ <script>→ <style>顺序编写，逻辑分层清晰。

<!-- 推荐结构 -->
<template>
  <div>{{ message }}</div>
</template>
<script>
export default {
  data() {
    return {
      message: 'Hello'
    }
  } // Vue 2

  setup() {
    const message = ref('Hello');
    return {
      message
    }
  } // Vue 3
}
</script>
<style scoped>
div {
  color: red;
}
</style>

文件内容应按一定顺序，原则是先外后内，先组件、数据后函数，先生命周期函数后自定义函数

- components
- props
- data
- watch
- computed
- created
- mounted
- activited
- update
- beforeRouteUpdate
- methods

指令规范

指令有缩写一律采用缩写形式

// bad
v-bind:class="{'show-left'：true}"
v-on:click="getListData"

// good
:class="{'show-left'：true}"
@click="getListData"

v-for 循环必须加上 key 属性，在整个 for 循环中 key 需要唯一

  <!-- good -->
  <ul>
    <li v-for="todo in todos" :key="todo.id">
      {{ todo.text }}
    </li>
  </ul>

  <!-- bad -->
  <ul>
    <li v-for="todo in todos">
      {{ todo.text }}
    </li>
  </ul>

避免 v-if 和 v-for 同时用在一个元素上（性能问题）

以下为两种解决方案

将数据替换为一个计算属性，让其返回过滤后的列表

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

<!-- good -->
<ul>
    <li v-for="user in activeUsers" :key="user.id">
      {{ user.name }}
    </li>
</ul>

<script>
computed: {
    activeUsers: function () {
      return this.users.filter(function (user) {
        return user.isActive
      })
    }
}
</script>

将 v-if 移动至容器元素上 (比如 ul, ol)

<!-- bad -->
<ul>
  <li v-for="user in users" v-if="shouldShowUsers" :key="user.id">
    {{ user.name }}
  </li>
</ul>

<!-- good -->
<ul v-if="shouldShowUsers">
  <li v-for="user in users" :key="user.id">
    {{ user.name }}
  </li>
</ul>

Props 规范

Props 定义应该尽量详细

// bad
props: ['status']

// good
props: {
  status: {
    type: String,
    required: true,
    validator: function (value) {
      return [
        'syncing',
        'synced',
        'version-conflict',
        'error'
      ].indexOf(value) !== -1
    }
  }
}

其他

用于debug的console应在使用完后及时删除
使用async await调用Promise函数
vue 文件使用 css 样式，需要加上 scoped
页面中HTML原生标签多于五行时，抽成组件后引用。单个文件不应超过1000行，超出应拆分多个文件组合
子组件不能直接使用父组件的值，应使用$emit发射事件到父组件中修改