Vue风格指南总结
2018-05-21 本文已影响0人
小焲
命名规范
A优先级
- 组件名应该始终是多个单词：避免跟现有的以及未来的 HTML 元素相冲突
B优先级
- 单文件组件的文件名应该要么始终是单词大写开头 (PascalCase)，要么始终是横线连接 (kebab-case)；
- 应用特定样式和约定的基础组件 (也就是展示类的、无逻辑的或无状态的组件) 应该全部以一个特定的前缀开头，比如 Base、App 或 V。
- 只应该拥有单个活跃实例的组件应该以 The 前缀命名，以示其唯一性。
- 和父组件紧密耦合的子组件应该以父组件名作为前缀命名。
- 单词顺序：组件名应该以高级别的 (通常是一般化描述的) 单词开头，以描述性的修饰词结尾。
- 对于绝大多数项目来说，在单文件组件和字符串模板中组件名应该总是 PascalCase 的——但是在 **DOM **模板中总是 kebab-case 的。
-
JS/JSX 中的组件名应该始终是 PascalCase 的，尽管在较为简单的应用中只使用
Vue.component进行全局组件注册时，可以使用 kebab-case 字符串。 - 组件名应该倾向于完整单词而不是缩写。
- 在声明 prop 的时候，其命名应该始终使用 camelCase，而在模板和 JSX中应该始终使用 kebab-case。
其他
A优先级
- 组件的 data 必须是一个函数。
- prop 的定义应该尽量详细，至少需要指定其类型。
- 总是用 key 配合 v-for。
- 永远不要把 v-if 和 v-for 同时用在同一个元素上。
- 所有组件都应该是有作用域的。针对style，可以使用
scoped特性、CSS Modules和BEM 约定。 - 在插件、混入等扩展中始终为自定义的私有属性使用 $_ 前缀。并附带一个命名空间以回避和其它作者的冲突 (比如 $_yourPluginName_)。
B优先级
- 只要有能够拼接文件的构建系统，就把每个组件单独分成文件。
- 在单文件组件、字符串模板和 JSX 中没有内容的组件应该是自闭合的——但在 DOM 模板里永远不要这样做。
- 多个特性的元素应该分多行撰写，每个特性一行。
- 组件模板应该只包含简单的表达式，复杂的表达式则应该重构为计算属性或方法。
- 应该把复杂计算属性分割为尽可能多的更简单的属性。
- 非空 HTML 特性值应该始终带引号 (单引号或双引号，选你 JS 里不用的那个)。
- 指令缩写 (用 : 表示 v-bind: 和用 @ 表示 v-on:) 应该要么都用要么都不用。
C优先级
- 组件/实例的选项应该有统一的顺序。
- 副作用 (触发组件外的影响)
el- 全局感知 (要求组件以外的知识)
name
parent- 组件类型 (更改组件的类型)
functional- 模板修改器 (改变模板的编译方式)
delimiters
comments- 模板依赖 (模板内使用的资源)
components
directives
filters- 组合 (向选项里合并属性)
extends
mixins- 接口 (组件的接口)
inheritAttrs
model
props/propsData- 本地状态 (本地的响应式属性)
data
computed- 事件 (通过响应式事件触发的回调)
watch
生命周期钩子 (按照它们被调用的顺序)- 非响应式的属性 (不依赖响应系统的实例属性)
methods- 渲染 (组件输出的声明式描述)
template/render
renderError
- 元素 (包括组件) 的特性应该有统一的顺序。
- 定义 (提供组件的选项)
is- 列表渲染 (创建多个变化的相同元素)
v-for- 条件渲染 (元素是否渲染/显示)
v-if
v-else-if
v-else
v-show
v-cloak- 渲染方式 (改变元素的渲染方式)
v-pre
v-once- 全局感知 (需要超越组件的知识)
id- 唯一的特性 (需要唯一值的特性)
ref
key
slot- 双向绑定 (把绑定和事件结合起来)
v-model- 其它特性 (所有普通的绑定或未绑定的特性)
- 事件 (组件事件监听器)
v-on- 内容 (覆写元素的内容)
v-html
v-text
- 当你的组件开始觉得密集或难以阅读时，在多个属性之间添加空行可以让其变得容易。
props: {
value: {
type: String,
required: true
},
focused: {
type: Boolean,
default: false
},
label: String,
icon: String
},
computed: {
formattedValue: function () {
// ...
},
inputClasses: function () {
// ...
}
}
- 单文件组件应该总是让
<script>、<template>和<style>标签的顺序保持一致。且<style>要放在最后，因为另外两个标签至少要有一个。
<script>/* ... */</script>
<template>...</template>
<style>/* ... */</style>
<!-- 或者 -->
<template>...</template>
<script>/* ... */</script>
<style>/* ... */</style>
参考文献：Vue风格指南
