vue风格总结

1 优先级 A 的规则：必要的

组件名为多个单词

除了 new Vue 外的任何地方,组件的 data 必须是一个函数

当 data 的值是一个对象时，它会在这个组件的所有实例之间共享。

Prop 定义应该尽量详细

为 v-for 设置键值

避免 v-if 和 v-for 用在一起

将 v-if 移动至容器元素上 (比如 ul, ol)

为组件样式设置作用域

使用 scoped 特性或CSS Modules

<template>
  <button class="button button-close">X</button>
</template>

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

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

<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>

私有属性名

使用模块作用域保持不允许外部访问的函数的私有性。如果无法做到这一点，就始终为插件、混入等不考虑作为对外公共 API 的自定义私有属性使用 $_ 前缀。

var myGreatMixin = {
  // ...
  methods: {
    $_myGreatMixin_update: function () {
      // ...
    }
  }
}

// 甚至更好！
var myGreatMixin = {
  // ...
  methods: {
    publicMethod() {
      // ...
      myPrivateFunction()
    }
  }
}

function myPrivateFunction() {
  // ...
}

export default myGreatMixin

2优先级 B 的规则：强烈推荐

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

MyComponent.vue
my-component.vue

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

BaseButton.vue
AppButton.vue
VButton.vue

组件名应该以高级别的 (通常是一般化描述的) 单词开头，以描述性的修饰词结尾

SearchButtonClear.vue
SearchInputQuery.vue

在单文件组件、字符串模板和 JSX中没有内容的组件应该是自闭合的——但在 DOM 模板里永远不要这样做。

<!-- 在单文件组件、字符串模板和 JSX 中 -->
<MyComponent/>

<!-- 在 DOM 模板中 -->
<my-component></my-component>

对于绝大多数项目来说，在单文件组件和字符串模板中组件名应该总是 PascalCase 的——但是在 DOM 模板中总是 kebab-case 的。

在声明 prop 的时候，其命名应该始终使用 camelCase，而在模板和 JSX中应该始终使用 kebab-case

多个特性的元素应该分多行撰写，每个特性一行

应该把复杂计算属性分割为尽可能多的更简单的属性

computed: {
  basePrice: function () {
    return this.manufactureCost / (1 - this.profitMargin)
  },
  discount: function () {
    return this.basePrice * (this.discountPercent || 0)
  },
  finalPrice: function () {
    return this.basePrice - this.discount
  }
}

非空 HTML 特性值应该始终带引号

3优先级 C 的规则：推荐

组件/实例的选项应该有统一的顺序

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

vue风格总结

1 优先级 A 的规则：必要的

2优先级 B 的规则：强烈推荐

3优先级 C 的规则：推荐

推荐阅读更多精彩内容