Vue在前端开发中需要注意什么

正例：

基于Vue风格指南整理

一、强制

1. 组件名为多个单词

组件名应该始终是多个单词的，根组件 App 除外。

export default {

name: 'TodoItem',

/data () {/ ...

}反例：

export default {

name: 'Todo',

// ...

}2. 组件数据

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

当在组件中使用 data 属性的时候 (除了 new Vue 外的任何地方)，它的值必须是返回一个对象的函数。

// In a .vue file

export default {

return {

foo: 'bar'

}}

}// 在一个 Vue 的根实例上直接使用对象是可以的，

// 因为只存在一个这样的实例。

new Vue({

data: {

foo: 'bar'

}})

反例：

export default {

data: {

foo: 'bar'

}}

3. Prop定义

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

props: {

status: String

}// 更好的做法！

props: {

status: {

type: String,

required: true,

return [

'syncing',

'synced',

'version-conflict',

'error'

].indexOf(value) !== -1

}}

}反例：

// 这样做只有开发原型系统时可以接受

props: ['status']

4. 为v-for设置键值

总是用 key 配合 v-for。

在组件上_总是_必须用 key 配合 v-for，以便维护内部组件及其子树的状态。甚至在元素上维护可预测的行为，比如动画中的对象固化 (object constancy)，也是一种好的做法。

    v-for="todo in todos"

    :key="todo.id"

    >{{ todo.text }}

    反例：

    • {{ todo.text }}

      • 5.避免 v-if 和 v-for 用在一起

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

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

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

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

        v-for="user in users"

        >{{ user.name }}

        反例：

          v-for="user in users"

          v-if="shouldShowUsers"

          >{{ user.name }}

          6. 为组件样式设置作用域

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

          这条规则只和单文件组件有关。你不一定要使用 scoped 特性。设置作用域也可以通过 CSS Modules，那是一个基于 class 的类似 BEM 的策略，当然你也可以使用其它的库或约定。

          不管怎样，对于组件库，我们应该更倾向于选用基于 class 的策略而不是 scoped 特性。

          这让覆写内部样式更容易：使用了常人可理解的 class 名称且没有太高的选择器优先级，而且不太会导致冲突。