Vue风格指南

组件名为多个单词

除了根组件App之外，组件名应该始终是多个单词的，这样做可以避免和现有的以及未来的HTML元素冲突

组件的data必须是一个函数

如果不是函数，那么会在组件的所有实例之间共享，导致会被随意修改，且无法维护。

Vue.component('some-comp', {
  data: {
    foo: 'bar'
  }
})

export default {
   
  data: {
    foo: 'bar'
  }
}

我们希望每个组件实例都管理自己的数据，为了做到这一点，每个实例必须生成一个独立的数据对象，用函数返回这个对象就可以了。

Vue.component('some-comp', {
  data: function () {
    return {
      foo: 'bar'
    }
  }
})

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

Prop定义应该尽量详细

这样做的好处：
1. 充当组件API
2. 开发环境中，如果提供格式不正确的prop，Vue会警告，帮助你捕获潜在的错误来源

// 更好的做法！
props: {
  status: {
    type: String,
    required: true,
    validator: function (value) {
   
      return [
        'syncing',
        'synced',
        'version-conflict',
        'error'
      ].indexOf(value) !== -1
    }
  }
}

v-for设置key

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

避免v-if和v-for在同一个元素上

一般我们在两种常见的情况下会倾向于这样做：

• 为了过滤一个列表中的项目 (比如v-for="user in users" v-if="user.isActive")。在这种情形下，请将users替换为一个计算属性 (比如 activeUsers)，让其返回过滤后的列表。

computed: {
  activeUsers: function () {
   
    return this.users.filter(function (user) {
   
      return user.isActive
    })
  }
}

• 为了避免渲染本应该被隐藏的列表 (比如v-for="user in users" v-if="shouldShowUsers")。这种情形下，请将v-if移动至容器元素上 (比如