前端Vue开发规范

最新推荐文章于 2025-02-11 15:55:56 发布

chensunxu

最新推荐文章于 2025-02-11 15:55:56 发布

阅读量803

点赞数

分类专栏： vue2.0

本文链接：https://blog.youkuaiyun.com/chensunxu/article/details/116423563

版权

vue2.0 专栏收录该内容

7 篇文章

订阅专栏

单文件组件的顶级元素的顺序

单文件组件应该总是让 <template> 、<script>和 <style> 标签的顺序保持一致。且 <style> 要放在最后，因为另外两个标签至少要有一个。

<!-- Component.vue -->
<template>...</template>
<script>/* ... */</script>
<style>/* ... */</style>

template

# 自闭合组件

在单文件组件、字符串模板中没有内容的组件应该是自闭合的——但在 DOM 模板里永远不要这样做。

自闭合组件表示它们不仅没有内容，而且刻意没有内容。其不同之处就好像书上的一页白纸对比贴有“本页有意留白”标签的白纸。而且没有了额外的闭合标签，你的代码也更简洁。

不幸的是，HTML 并不支持自闭合的自定义元素——只有官方的“空”元素。所以上述策略仅适用于进入 DOM 之前 Vue 的模板编译器能够触达的地方，然后再产出符合 DOM 规范的 HTML。

<!-- 在单文件组件、字符串模板中 -->
<my-component />
 
<!-- 在 DOM 模板中 -->
<my-component></my-component>

# 为 v-for 设置键值(key值)

在写v-for的时候，都需要给元素加上一个key属性，这个key属性必须是唯一的标识

key的主要作用就是用来提高渲染性能的

key属性可以避免数据混乱的情况出现（如果元素中包含了有临时数据的元素，如果不用key就会产生数据混乱）

注意：我们在使用的使用经常会使用index(即数组的下标)来作为key,但其实这是不推荐的一种使用方法。

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

# 避免 v-if 和 v-for 用在一起

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

一般我们在两种常见的情况下会倾向于这样做：

为了过滤一个列表中的项目 (比如 v-for="user in users" v-if="user.isActive")。在这种情形下，请将 users 替换为一个计算属性 (比如 activeUsers)，让其返回过滤后的列表。

为了避免渲染本应该被隐藏的列表 (比如 v-for="user in users" v-if="shouldShowUsers")。这种情形下，请将 v-if 移动至容器元素上 (比如 ul、ol)。

反例

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

好例子

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

# 没有在 v-if/v-else-if/v-else 中使用 key

如果一组 v-if + v-else 的元素类型相同，最好使用 key (比如两个 <div> 元素)。

默认情况下，Vue 会尽可能高效的更新 DOM。这意味着其在相同类型的元素之间切换时，会修补已存在的元素，而不是将旧的元素移除然后在同一位置添加一个新元素。如果本不相同的元素被识别为相同，则会出现意料之外的结果。

反例

<div v-if="error">
  错误：{{ error }}
</div>
<div v-else>
  {{ results }}
</div>

好例子

<div v-if="error" key="search-status" >
  错误：{{ error }}
</div>
<div v-else key="search-results">
  {{ results }}
</div>

script

# 组件数据

组件的 data 必须是一个函数。

Vue.component('some-comp', {
  data: function () {
    return {
      foo: 'bar'
    }
  }
})
 
// In a .vue file
export default {
  data () {
    return {
      foo: 'bar'
    }
  }
}

# Prop定义应该尽量详细，包括类型等

props: {
  status: {
   type: String,
   default: ''
  }
}
 
// 多种类型
props: {
  status: {
   type: [String, Number],
   default: ''
  }
}
 
// 更好的做法！
props: {
  status: {
    type: String,
    required: true,
    validator: function (value) {
      return [
        'syncing',
        'synced',
        'version-conflict',
        'error'
      ].indexOf(value) !== -1
    }
  }
}

# 代码简洁

1.删除无用的生命周期

2.注释或者删除console.log

style

# 为组件样式设置作用域。

<template>
  <button class="button button-close">X</button>
</template>
 
<!-- 使用 `scoped` attribute -->
<style scoped>
.button {
  border: none;
  border-radius: 2px;
}
 
.button-close {
  background-color: red;
}
</style>

# 避免使用标签选择器（效率低、损耗性能）。

在 scoped 样式中，类选择器比元素选择器更好，因为大量使用元素选择器是很慢的。

反例

<template>
  <button>X</button>
</template>
 
<style scoped>
button {
  background-color: red;
}
</style>

好例子

<template>
  <button class="btn btn-close">X</button>
</template>
 
<style scoped>
.btn-close {
  background-color: red;
}
</style>

# 非特殊情况下，禁止使用 ID 选择器定义样式。有 JS 逻辑的情况除外。

# CSS 属性书写顺序

先决定定位宽高显示大小，再做局部细节修饰！

推荐顺序：定位属性(或显示属性，display)->宽高属性->边距属性(margin, padding)->字体，背景，颜色等，修饰属性的定义。

# 其他

样式应该写在class，除特殊情况外，禁止写在style里面

命名规范

# 根据vue官方和W3C建议，组件命名遵循：

* 组件名采用kebab-case (短横线分隔命名) 
* 全局组件用 base-名称， 局部组件用 页面-名称
* 引入组件采用PascalCase (单词首字母大写命名)

# method 自定义方法命名：

* 动宾短语（good：jumpPage、openCarInfoDialog）（bad：go、nextPage、show、open、login）
* ajax 方法以 get、post 开头，以 Api结尾（good：getListDataApi、postFormDataApi）（bad：takeData、confirmData、getList、postForm）
* 事件方法以 on 开头（onTypeChange、onUsernameInput）或者 handle开头（handleTypeChange、handleUsernameInput）
* init、refresh 单词除外
* 尽量使用常用单词开头（set、get、open、close、jump）
* 驼峰命名（good: getListData）（bad: get_list_data）

# 命名可遵循以下规则：

1、有意义的名词、简短、具有可读性
2、以小写开头，采用短横线分割命名
3、文件夹命名主要以功能模块代表命名
同时还需要注意：必须符合自定义元素规范: 使用连字符分隔单词，切勿使用保留字。

注释规范

# 代码注释

在一个项目的后期维护中显的尤为重要，所以我们要为每一个被复用的组件编写组件使用说明，为组件中每一个方法编写方法说明。

1.公共组件使用说明
2.各组件中重要函数或者类说明
3.复杂的业务逻辑处理说明
4.特殊情况的代码处理说明,对于代码中特殊用途的变量、存在临界值、函数中使用的hack、使用了某种算法或思路等需要进行注释描述
5.注释块必须以/**（至少两个星号）开头**/；
6.单行注释使用//；

# 单行注释

  普通方法一般使用单行注释 // 来说明该方法主要作用 （放在语句右边而不是上边）

# 多行注释

   组件使用说明，和调用说明 
   <!--公用组件：数据表格
      /**
      * 组件名称
      * @module 组件存放位置
      * @desc 组件描述
      * @author 组件作者
      * @date 2020年12月05日17:22:43
      * @param {Object} [title]    - 参数说明
      * @param {String} [columns] - 参数说明
      * @example 调用示例
      *  <hbTable :title="title" :columns="columns" :tableData="tableData"></hbTable>
          */
       -->

其他