Vue2使用规范

vue规范

组件数据

• 组件的 data 必须是一个函数。

export default {
  data () {
    return {
      foo: 'bar'
    }
  }
}

Prop 定义

在你提交的代码中，prop 的定义应该尽量详细，至少需要指定其类型

// good
props: {
  status: String
}

// better
props: {
  status: {
    type: String,
    default: ''
  }
}

v-for 设置键值

在组件上总是必须用 key 配合 v-for，以便维护内部组件及其子树的状态。并且key值唯一。

<ul>
  <li
          v-for="todo in todos"
          :key="todo.id"
  >
    {{ todo.text }}
  </li>
</ul>

v-if 和 v-for

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

为组件样式设置作用域

对于应用来说，顶级 App 组件和布局组件中的样式可以是全局的，但是其它所有组件都应该是有作用域的。

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

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

文件名

单文件组件的文件名应该要么始终是单词大写开头

完整单词的组件名

组件名应该倾向于完整单词而不是缩写。

基础组件名

基础组件即底层封装通用组件，加上前缀Base,如BaseTable.vue

组件名中的单词顺序

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

SetUser.vue
UpdateUserDialog.vue

组件标签

使用kebab-case,如果不涉及solt,使用自闭方式。

<!-- 在所有地方 -->
<my-button />

<!-- solt -->
<base-button :id='id' :type='type'>确定</base-button>

组件注册与使用

组件名应该始终是 PascalCase 的

Vue.component('MyComponent', {
// ...
})

Prop 名大小写

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

// 命名
props: {
  greetingText: String
}

// 模板
<WelcomeMessage greeting-text="hi"/>

多个 attribute 的元素

<img
        src="https://vuejs.org/images/logo.png"
        alt="Vue Logo"
>

模板中简单的表达式

组件模板应该只包含简单的表达式，复杂的表达式则应该重构为计算属性或方法。

带双引号的 attribute 值

非空 HTML attribute 值应该始终带引号，同时如个多个属性必须空格

<app-sidebar :style="{ width: sidebarWidth + 'px' }">

指令缩写

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

单文件组件的顶级元素的顺序

单文件组件]应该总是让 <script>、<template> 和 <style> 标签的顺序保持一致。且 <style> 要放在最后，template在最前面。

<!-- ComponentA.vue -->

<template>...</template>
<script>/* ... */</script>
<style>/* ... */</style>

隐性的父子组件通信

应该优先通过 prop 和事件进行父子组件之间的通信，而不是 this.$parent 或变更 prop

非 Flux 的全局状态管理

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

文件模板

<template>
  <div></div>
</template>

<script>
// import

export default {
  // 注册
  components: {},
  // 定义变量
  data() {
    return {}
  },
  // 计算属性 当里面的数据发生变化时，会自动触发重新计算
  computed: {},
  // 监控data中的变量变化
  watch: {},
  // 方法集合
  methods: {},
  // 创建完成（可以访问当前this实例）
  created() {},
  // 挂载完成（可以访问DOM元素）
  mounted() {},
  // 创建之前
  beforeCreate() {},
  // 挂载之前
  beforeMount() {},
  // 更新之前
  beforeUpdate() {},
  // 更新之后
  updated() {},
  // 销毁之前
  beforeDestroy() {},
  // 销毁完成
  destroyed() {},
  // 如果页面有keep-alive缓存功能，这个函数会触发
  activated() {}
}
</script>

<style lang="scss" scoped></style>