官方规范

组件模板内表达式简单化

Vue.js 的表达式是 100% 的 Javascript 表达式。所以功能性还是很强大的。

• 模板内应该尽量保持表达式的简单化。 复杂的表达式使用computed 计算属性 或 method方法来替代该功能。

原因

• 复杂的行内表达式难以阅读。
• 行内表达式是不能够通用的，这可能会导致重复编码的问题。
• IDE 基本上不能识别行内表达式语法，所以使用行内表达式 IDE 不能提供自动补全和语法校验功能。

例子

//在模板中  
{{ normalizedFullName }}

// 复杂表达式已经移入一个计算属性
computed: {
 normalizedFullName: function () {
   return this.fullName.split(' ').map(function (word) {
     return word[0].toUpperCase() + word.slice(1)
   }).join(' ')
 }
}

props定义尽量详细

prop 的定义应该尽量详细，至少需要指定其类型。

原因：

• 写明了组件的 API，所以很容易看懂组件的用法。
• 在开发环境下，如果向一个组件提供格式不正确的 prop，Vue 将会告警，捕获潜在的错误来源。

例子

export default {
  // 这种写法一般只有在开发原型的时候可以接受
   props: ['value']
   //我们常用的是以下这种↓
   props:{
     value:String
   }
   //或者是这种↓
   props:{
     value{
       type:String,
       default:true
     }
   }
 }

统一使用指令缩写

指令缩写 (用 : 表示 v-bind: 、用 @ 表示 v-on: 和用 # 表示 v-slot:) 应该要么都用要么都不用。

所以约定：统一使用指令缩写

原因

• 保持代码一致性，统一性。

为v-for设置键值key

组件上总是用key 配合 v-for，以便维护内部组件及其子树的状态。

原因参考链接：v-for中key的作用

不推荐：

不要把 v-if 和 v-for 用在同一个元素上

建议不要在与v-for相同的元素上使用v-if。因为当它们处于同一节点。

v-for 比 v-if 具有更高的优先级，这意味着 v-if 将分别重复运行于每个 v-for 循环中。

反例：

为单文件组件样式设置作用域

需要单独为当前组件写样式时，使用 **<style scoped></style> **这个标签，加scoped是为了使得样式只在当前页面有效，防止出现重名污染其他组件。

※ 尽量不要在页面上写一坨样式.....，如下图？：

推荐如下： 例子：

  <style lang='less' scoped>
    .btn-group {
      padding: 0px;
      text-align:center;
    }
  </style>

优先通过 Vuex 管理全局状态

应该优先通过Vuex 管理全局状态 ，而不是通过 this.$root或一个全局事件总线(EventBus)。