1. 组件的递归调用
例如在树形结构中
// m-tree
<template>
<m-tree>
<m-tree-node />
</m-tree>
</template>
// m-tree-node
<template>
<div>
<p>this is tree node</p>
<!--此处可以直接引用-->
<m-tree-node v-if="hasChild" />
</div>
</template>
<script>
export default {
name: 'MTreeNode'
}
</script>
参考Element Tree组件
2. 必要的时候使用jsx
例如在Element UI的Message中，message支持传递vNode，此时的vNode需要手动h
const h = this.$createElement
const message = h('div', { class: 'test' }, [])
// ...这样写会比较麻烦且阅读不清晰，此时转换成jsx就不一样了。
参考 babel-plugin-transform-vue-jsx
3. 组件/实例的选项应该有统一的顺序
推荐顺序
- 全局感知
- 组件类型
- 模板依赖
- components
- directives
- filters
- 组合
- 接口
- 本地状态
- 事件
- watch
- 生命周期钩子 (按照它们被调用的顺序)
- 非响应式的属性
- 渲染
参考 组件/实例的选项的顺序
4. 元素属性的顺序
<div
:is=""
v-for=""
v-if=""
v-show=""
ref=""
key=""
v-model=""
v-on=""
v-html=""
/>
参考 元素特性顺序
5. 组件/实例选项中的空行
// good
props: {
value: {
type: String,
required: true
},
focused: {
type: Boolean,
default: false
},
label: String,
icon: String
},
computed: {
formattedValue: function () {
// ...
},
inputClasses: function () {
// ...
}
}6. 组件名应该始终是多个单词的，根组件 App 除外。
7. 多个特性的元素换行
但不能为了换行而换行，超过2个或以上时，建议换行
<!--bad-->
<div
v-if="isShowDiv"
/>
<!--good-->
<div v-if="isShowDiv" />
<!--good-->
<div
v-if="isShowDiv"
ref="myDiv"
@handle-click="handleClick"
/>
这个规则类似于js换行(超过3个或以上时建议换行)
// bad
import {a, b, c} from Test
// good
import {
a,
b,
c
} from Test
1. 组件的递归调用
例如在树形结构中
2. 必要的时候使用jsx
例如在Element UI的Message中，message支持传递
vNode，此时的vNode需要手动h这样写会比较麻烦且阅读不清晰，此时转换成jsx就不一样了。
3. 组件/实例的选项应该有统一的顺序
推荐顺序
4. 元素属性的顺序
5. 组件/实例选项中的空行
6. 组件名应该始终是多个单词的，根组件 App 除外。
7. 多个特性的元素换行
但不能为了换行而换行，超过2个或以上时，建议换行
这个规则类似于js换行(超过3个或以上时建议换行)