外观

本页目录

vue规范 ​

Router规范 ​

页面跳转数据传递使用路由参数 ​

页面跳转，例如 A 页面跳转到 B 页面，需要将 A 页面的数据传递到 B 页面，推荐使用 路由参数进行传参，而不是将需要传递的数据保存 vuex，然后在 B 页面取出 vuex 的数据，因为如果在 B 页面刷新会导致 vuex 数据丢失，导致 B 页面无法正常显示数据。

js
let id = ' 123';
this.$router.push({ name: 'userCenter', query: { id: id } });

使用路由懒加载（延迟加载）机制 ​

js
{
  path: '/uploadAttachment',
  name: 'uploadAttachment',
  meta: {
    title: '上传附件'
  },
  component: () => import('@/view/components/uploadAttachment/index.vue')
}

router中的命名规范 ​

  • path命名规范选择单个单词组成，如果一个单词不能代表页面意思，可以采用kebab-case命名规范。与vue文件的目录命名的单词保持一致。必须以 / 开头，即使是children里的path也要以 / 开头，这样很方便找到对应的文件。
  • name命名规范采用kebab-case命名规范且和component组件名保持一致！（因为要保keep-alive特性，keep-alive按照component的name进行缓存，所以两者必须高度保持一致）
  • meta里面至少要有title属性，并且命名与页面路由和文件名意思相同。
js
export const reload = [
  {
    path: '/reload',
    name: 'reload',
    component: () =>{
        import('@/views/reload/reload.vue')
    },
    meta: { title: '加载页面' },
    children: [
      {
        path: '/reload/list',
        name: 'reload-list',
        component: () =>{
            import('@/views/reload/reload-list/reload-list.vue')
        },
        meta: { title: '加载列表' },
        children: [
          {
              path: '/reload/list/file',
              name: 'reload-list-file',
              component: () =>{
                import('@/views/reload/reload-list/reload-list-file.vue')
              },
              meta: { title: '加载列表文件' }
          }
        ]
      }
    ]
  }
];

Vue组件及内容规范 ​

标签顺序保持一致 ​

单文件组件应该总是让标签顺序保持为：

html
<template>...</template>
<script>...</script>
<style>...</style>

组件/实例的选项的顺序 ​

组件/实例的选项应该有统一的顺序。下面是我们推荐的组件选项默认顺序。它们被划分为几大类，所以你也能知道从插件里添加的新 property 应该放到哪里。

  • 常见顺序展示：
md
name > components > filters > mixins >  props > data > computed > watch > 钩子函数（按其执行顺序） > methods
  • 详细展示：
md
//副作用 (触发组件外的影响)
el
//全局感知 (要求组件以外的知识)
name
parent
//组件类型 (更改组件的类型)
functional
//模板修改器 (改变模板的编译方式)
delimiters
comments
//模板依赖 (模板内使用的资源)
components
directives
filters
//组合 (向选项里合并 property)
extends
mixins
//接口 (组件的接口)
inheritAttrs
model
props/propsData
//本地状态 (本地的响应式 property)
data
computed
//事件 (通过响应式事件触发的回调)
watch
//生命周期钩子 (按照它们被调用的顺序)
beforeCreate
created
beforeMount
mounted
beforeUpdate
updated
activated
deactivated
beforeDestroy
destroyed
//非响应式的 property (不依赖响应系统的实例 property)
methods
//渲染 (组件输出的声明式描述)
template/render
renderError

组件名字 ​

组件名应该始终是多个单词的，根组件 App 以及 transition 、component 之类的 Vue 内置组件除外。 这样做可以避免跟现有的以及未来的 HTML 元素相冲突，因为所有的 HTML 元素名称都是单个单词的。

js
Vue.component('todo-item', { 
// ...
})
import TodoItem from './todo-item'
import TodoItem from './todo/todo-item.vue'
export default { 
  name: 'todo-item', // ... 
}

模板中的组件名 ​

对于绝大多数项目来说，在单文件组件和字符串模板中组件名应该总是大坨峰命名，并且使用自闭合组件。但是在 DOM 模板中总是中划线命名，并且需要有闭合标签。

html
//在单文件组件和字符串模板中
<MyHeader>
<MyComponent/>
<table :column="data" />
</MyHeader>
//在 DOM 模板中
<my-component>
<table :column="data"></table>
</my-component>

组件数据 ​

组件的 data 必须是一个函数。 当在组件中使用 data property 的时候 (除了 new Vue 外的任何地方)，它的值必须是返回一个对象的函数。

js
Vue.component('todo-item', {
  data: function () {
    return {
      foo: 'bar'
    }
  }
})
export default {
  data () {
    return {
      foo: 'bar'
    }
  }
}
// 在一个 Vue 的根实例上直接使用对象是可以的，因为只存在一个这样的实例。
new Vue({
  data: {
    foo: 'bar'
  }
})

Prop定义 ​

Prop 定义应该尽量详细。在你提交的代码中，prop 的定义应该尽量详细；至少需要指定其类型；必须加上注释，表明其含义；必须加上required或者default，两者二选其一；如果有业务需要，必须加上 validator 验证

js
props: {
  status: String
}
props: {
// 组件状态，用于控制组件的颜色
  status: {
    type: String,
    required: true,
    validator: function (value) {
      return [
        'syncing',
        'version-conflict',
      ].indexOf(value) !== -1
    },
 	// 用户级别，用于显示皇冠个数
userLevel：{
type: String,
required: true
   }
  }
}

多个attribute的元素 ​

大于两个attribute的元素应该分多行撰写，每个attribute一行。

html
<div class="main"></div>
<MyComponent
  foo="a"
  bar="b"
  baz="c"
/>

模板中使用简单的表达式 ​

正例：

js
<template>
  <p>{{ normalizedFullName }}</p>
</template>
// 复杂表达式已经移入一个计算属性
computed: {
  normalizedFullName: function () {
    return this.fullName.split(' ').map(function (word) {
      return word[0].toUpperCase() + word.slice(1)
    }).join(' ')
  }
}

反例：

js
<template>
  <p>
       {{
          fullName.split(' ').map(function (word) {
             return word[0].toUpperCase() + word.slice(1)
           }).join(' ')
        }}
  </p>
</template>

指令推荐都使用缩写形式 ​

用 : 表示 v-bind: 、用 @ 表示 v-on: 和用 # 表示 v-slot

html
<input
  @input="onInput"
  @focus="onFocus"
>

v-show 与 v-if 选择 ​

如果运行时，需要非常频繁地切换，使用v-show；如果在运行时，条件很少改变，使用 v-if。另外v-if比较耗性能，大量元素和内容进行判断，建议用v-show。

为v-for设置键值 ​

总是用 key 配合 v-for。在组件上总是必须用 key 配合 v-for，以便维护内部组件及其子树的状态。甚至在元素上维护可预测的行为，比如动画中的对象固化 (object constancy)，也是一种好的做法。

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

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

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

html
<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) ​

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

为组件样式设置作用域 ​

公共样式单独新建css或less、sass文件进行引入，组件内style使用scoped特性。

html
<style scoped>
.btn-close {
    background-color: red;
}
</style>

提示

尽量不要手动操作 DOM，因使用 vue 框架，所以在项目开发中尽量使用 vue 的数据驱动更新 DOM，尽量（不到万不得已）不要手动操作 DOM，包括：增删改 dom 元素、以及更改样式、添加事件等。

删除无用代码

因使用了 git/svn 等代码版本工具，对于无用代码必须及时删除，例如：一些调试的 console 语句、无用的弃用功能代码。

在 GitHub 上编辑此页

上次更新: