Vue代码规范
0 Views 前端 with
本文字数:1,341 字 | 阅读时长 ≈ 6 min

Vue代码规范

0 Views 前端 with
本文字数:1,341 字 | 阅读时长 ≈ 6 min

这篇文章主要介绍了Vue的代码规范

组件名为多个单词

组件名应该始终是多个单词的,根组件 App 除外。

这样做可以避免跟现有的以及未来的 HTML 元素相冲突,因为所有的 HTML 元素名称都是单个单词的。

反例

1
2
3
Vue.component('todo', {
// ...
})

好例子

1
2
3
Vue.component('todo-item', {
// ...
})

组件数据

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

反例

1
2
3
4
5
Vue.component('some-comp', {
data: {
foo: 'bar'
}
})

好例子

1
2
3
4
5
6
7
Vue.component('some-comp', {
data: function() {
return {
foo: 'bar'
}
}
})

Prop 定义

Prop 定义应该尽量详细。

在你提交的代码中,prop 的定义应该尽量详细,至少需要指定其类型。

反例

1
2
// 这样做只有开发原型系统时可以接受
props: ['status']

好例子

1
2
3
props: {
status: String
}

更好的做法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
// 更好的做法!
props: {
status: {
type: String,
required: true,
validator: function (value) {
return [
'syncing',
'synced',
'version-conflict',
'error'
].indexOf(value) !== -1
}
}
}

v-for 设置键值

总是用 key 配合 v-for

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

假设你有一个待办事项列表:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
data: function () {
return {
todos: [
{
id: 1,
text: '学习使用 v-for'
},
{
id: 2,
text: '学习使用 key'
}
]
}
}

反例

1
2
3
4
5
<ul>
<li v-for="todo in todos">
{{ todo.text }}
</li>
</ul>

好例子

1
2
3
4
5
6
7
8
<ul>
<li
v-for="todo in todos"
:key="todo.id"
>
{{ todo.text }}
</li>
</ul>

避免 v-ifv-for 用在一起

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

我们可以将:

1
2
3
4
5
6
7
8
9
<ul>
<li
v-for="user in users"
v-if="shouldShowUsers"
:key="user.id"
>
{{ user.name }}
</li>
</ul>

更新为:

1
2
3
4
5
6
7
8
<ul v-if="shouldShowUsers">
<li
v-for="user in users"
:key="user.id"
>
{{ user.name }}
</li>
</ul>

通过将 v-if 移动到容器元素,我们不会再对列表中的_每个_用户检查 shouldShowUsers。取而代之的是,我们只检查它一次,且不会在 shouldShowUsers 为否的时候运算 v-for

为组件样式设置作用域

对于应用来说,顶级 App 组件和布局组件中的样式可以是全局的,但是其它所有组件都应该是有作用域的。

反例

1
2
3
4
5
6
7
8
9
<template>
<button class="btn btn-close">X</button>
</template>

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

好例子

使用 scoped 特性

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<template>
<button class="button button-close">X</button>
</template>

<!-- 使用 `scoped` 特性 -->
<style scoped>
.button {
border: none;
border-radius: 2px;
}

.button-close {
background-color: red;
}
</style>

使用 CSS Modules

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<template>
<button :class="[$style.button, $style.buttonClose]">X</button>
</template>

<!-- 使用 CSS Modules -->
<style module>
.button {
border: none;
border-radius: 2px;
}

.buttonClose {
background-color: red;
}
</style>

使用 BEM 约定

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<template>
<button class="c-Button c-Button--close">X</button>
</template>

<!-- 使用 BEM 约定 -->
<style>
.c-Button {
border: none;
border-radius: 2px;
}

.c-Button--close {
background-color: red;
}
</style>

组件文件

只要有能够拼接文件的构建系统,就把每个组件单独分成文件。

当你需要编辑一个组件或查阅一个组件的用法时,可以更快速的找到它。

反例

1
2
3
4
5
6
7
Vue.component('TodoList', {
// ...
})

Vue.component('TodoItem', {
// ...
})

好例子

1
2
3
4
5
6
7
8
9
components/
|- TodoList.js
|- TodoItem.js



components/
|- TodoList.vue
|- TodoItem.vue

单文件组件文件的大小写

单文件组件的文件名应该要么始终是单词大写开头 (PascalCase),要么始终是横线连接 (kebab-case)。

单词大写开头对于代码编辑器的自动补全最为友好,因为这使得我们在 JS(X) 和模板中引用组件的方式尽可能的一致。然而,混用文件命名方式有的时候会导致大小写不敏感的文件系统的问题,这也是横线连接命名同样完全可取的原因。

反例

1
2
components/
|- mycomponent.vue
1
2
components/
|- myComponent.vue

好例子

1
2
components/
|- MyComponent.vue

1
2
components/
|- my-component.vue

基础组件名

应用特定样式和约定的基础组件 (也就是展示类的、无逻辑的或无状态的组件) 应该全部以一个特定的前缀开头,比如 BaseAppV

反例

1
2
3
4
components/
|- MyButton.vue
|- VueTable.vue
|- Icon.vue

好例子

1
2
3
4
components/
|- BaseButton.vue
|- BaseTable.vue
|- BaseIcon.vue

1
2
3
4
components/
|- AppButton.vue
|- AppTable.vue
|- AppIcon.vue
1
2
3
4
components/
|- VButton.vue
|- VTable.vue
|- VIcon.vue

单例组件名

只应该拥有单个活跃实例的组件应该以 The 前缀命名,以示其唯一性。

这不意味着组件只可用于一个单页面,而是每个页面只使用一次。这些组件永远不接受任何 prop,因为它们是为你的应用定制的,而不是它们在你的应用中的上下文。如果你发现有必要添加 prop,那就表明这实际上是一个可复用的组件,只是目前在每个页面里只使用一次。

反例

1
2
3
components/
|- Heading.vue
|- MySidebar.vue

好例子

1
2
3
components/
|- TheHeading.vue
|- TheSidebar.vue
May 31, 2018
May 30, 2018
May 30, 2018