本文已参与「新人创作礼」活动，一起开启掘金创作之路。 # Vue 2.x 规范 ## 组件 data 必须是一个函数当在组件中使用 data 的时候 (除了 new Vue 外的任何地方)，它的值必须是一个返回对象的函数，这样做可以规避一些组件复用时的 bug #### 不推荐 ```js export default { data: { foo: 'bar' } } ``` #### 推荐 ```js export default { data () { return { foo: 'bar' } } } ``` ## Prop 定义尽量详细 Prop 的定义应该尽量详细，至少需要指定其类型，这样可以避免一些潜在的类型错误 #### 不推荐 ```js // 来源：src\components\chart\embedexcel\dataFilterModal.vue props: ["position", "spread"] ``` #### 推荐 ```js props: { strProp: { type: String, default: '' }, arrProp: { type: Array, default: () => [] }, objProp: { type: Object, default: () => ({}) } } ``` ## v-for 设置唯一键值使用 v-for 时必须设置唯一的 key，以便 Vue 在渲染时把可能的 DOM 变更降到最低 #### 不推荐 ```html

``` #### 推荐 ```html

{{ todo.text }}

``` ## 避免 v-for 和 v-if 同时使用（一）当过滤一个列表中的项目时，永远不要把 v-for 和 v-if 同时用在同一个元素上，取而代之的是使用计算属性 #### 不推荐 ```html

``` #### 推荐 ```html

``` ```js computed: { activeUsers: function () { return this.users.filter(() => user.isActive) } } ``` ## 避免 v-for 和 v-if 同时使用（二）当需要隐藏一个本应该被隐藏的列表时，永远不要把 v-for 和 v-if 同时用在同一个元素上，取而代之的是添加一个父元素并在父元素上使用 v-if #### 不推荐 ```html

``` #### 推荐 ```html ``` ## Mixin 中使用私有属性名为避免混入时属性相冲突，建议对插件、混入等不考虑作为公共 API 的自定义私有属性使用 $_ 前缀 #### 不推荐 ```js // 来源：src\views\Pages\Dashboard\mixins\embedexcelFuncs.js export const embedexcelFuncs = { data () { return { styleTemp: {} } }, methods: { handleSpaceList() {} } } ``` #### 推荐 ```js export const myGreatMixin = { data () { return { $_myGreatMixin_title: '' } }, methods: { $_myGreatMixin_update: function () {} } } ``` ## 组件命名应由多单词组成组件名应该始终是多个单词的（根组件 App 以及 Vue 内置组件除外）且命名风格为大驼峰，这样做可以避免跟现有或未来的 HTML 元素相冲突 #### 不推荐 ```js Vue.component('todo', { // ... }) // 来源：src\components\modal\confirm.vue export default { name: 'confirm', // ... } ``` #### 推荐 ```js Vue.component('TodoItem', { // ... }) export default { name: 'BaseConfirm', // ... } ``` ## 为组件的样式设置作用域除特殊情况（如 element 部分组件的 dom 会被 transfer 到 body 下）外，单文件组件应该对样式设置作用域，以免当前组件的样式影响到其他组件的样式 #### 不推荐 ```html ``` #### 推荐 ```html ``` ## 单文件组件的文件命名单文件组件的文件命名风格应保持一致，统一为大驼峰 #### 不推荐 ``` components/ |- table-page.vue |- dragRightIcon.vue |- UserInfoModal.vue ``` #### 推荐 ``` components/ |- TablePage.vue |- DragRightIcon.vue |- UserInfoModal.vue ``` ## 模板中的组件名大小写在 Vue 模板中，统一使用烤肉串命名法（**不强制**） #### 不推荐 ```html ``` #### 推荐 ```html ``` ## 自闭合组件在 Vue 模板中，组件统一自闭合 #### 不推荐 ```html ``` #### 推荐 ```html ``` ## 完整单词的组件名组件名应该倾向于完整单词而不是缩写 #### 不推荐 ``` components/ |- SdSettings.vue |- UProfOpts.vue ``` #### 推荐 ``` components/ |- StudentDashboardSettings.vue |- UserProfileOptions.vue ``` ## Prop 名大小写在声明 prop 的时候，其命名应该始终使用小驼峰命名，而在 Vue 模板中应该始终使用烤肉串命名 #### 不推荐 ```js props: { 'greeting-text': String } ``` ```html ``` #### 推荐 ```js props: { greetingText: { type: String, default: '', } } ``` ```html ``` ## 多个 attribute 的元素多个 attribute 的元素应该分多行撰写，每个 attribute 一行，因为这样更易读 #### 不推荐 ```html ``` #### 推荐 ```html ``` ## 模板中简单的表达式组件模板应该只包含简单的表达式，复杂的表达式则应该重构为计算属性或方法，因为计算属性和方法直观且可复用 #### 不推荐 ```html {{item.split('-status:')[0].split('/')[0]}} ``` #### 推荐 ```html {{ normalizedFullName }} ``` ```js computed: { normalizedFullName: function () { return this.fullName.split(' ').map(function (word) { return word[0].toUpperCase() + word.slice(1) }).join(' ') } } ``` ## 计算属性 SRP 应该把复杂计算属性分割为尽可能多的更简单的 property，一个属性只做一件事（即单一职责原则），这样易于测试、阅读以及更好的拥抱变化 #### 不推荐 ```js computed: { price: function () { var basePrice = this.manufactureCost / (1 - this.profitMargin) return ( basePrice - basePrice * (this.discountPercent || 0) ) } } ``` #### 推荐 ```js computed: { basePrice: function () { return this.manufactureCost / (1 - this.profitMargin) }, discount: function () { return this.basePrice * (this.discountPercent || 0) }, finalPrice: function () { return this.basePrice - this.discount } } ``` ## 带引号的 attribute 值非空 attribute 的值应该始终带引号（推荐双引号），增加可读性 #### 不推荐 ```html ``` #### 推荐 ```html ``` ## 指令缩写统一指令缩写（用 : 表示 v-bind:，用 @ 表示 v-on:，和用 # 表示 v-slot:）应该要么都用要么都不用，推荐缩写 #### 推荐 ```html ``` ## 组件/实例的选项顺序统一组件/实例的选项应该有统一的顺序 1. 副作用 (触发组件外的影响) * el 2. 全局感知 (要求组件以外的知识) * name * parent 3. 组件类型 (更改组件的类型) * functional 4. 模板修改器 (改变模板的编译方式) * delimiters * comments 5. 模板依赖 (模板内使用的资源) * components * directives * filters 6. 组合 (向选项里合并 property) * extends * mixins 7. 接口 (组件的接口) * inheritAttrs * model * props/propsData 8. 本地状态 (本地的响应式 property) * data * computed 9. 事件 (通过响应式事件触发的回调) * watch 10. 生命周期钩子 (按照它们被调用的顺序) * beforeCreate * created * beforeMount * mounted * beforeUpdate * updated * activated * deactivated * beforeDestroy * destroyed 11. 非响应式的 property (不依赖响应系统的实例 property) * methods 12. 渲染 (组件输出的声明式描述) * template/render * renderError #### 常用组件选项示例 ```js new Vue({ el: '', name: '', components: {}, directives: {}, filters: {}, mixins: [], props: {}, data () {}, computed: {}, watch: {}, beforeCreate () {}, created () {}, beforeMount () {}, mounted () {}, beforeDestroy () {}, destroyed () {}, methods: {}, template: ``, render () {} }) ``` ## 元素 attribute 的顺序统一元素 (包括组件) 的 attribute 应该有统一的顺序（**不强制**） 1. 定义 (提供组件的选项) * is 2. 列表渲染 (创建多个变化的相同元素) * v-for 3. 条件渲染 (元素是否渲染/显示) * v-if * v-else-if * v-else * v-show * v-cloak 4. 渲染方式 (改变元素的渲染方式) * v-pre * v-once 5. 全局感知 (需要超越组件的知识) * id 6. 唯一的 attribute (需要唯一值的 attribute) * ref * key 7. 双向绑定 (把绑定和事件结合起来) * v-model 8. 其它 attribute (所有普通的绑定或未绑定的 attribute) 9. 事件 (组件事件监听器) * v-on 10. 内容 (覆写元素的内容) * v-html * v-text #### 常用 attribute 示例 ```html ``` ## 单文件组件的顶级元素顺序单文件组件应该总是让 `