Vue开发规范细节

Vue开发规范细节

一、必要的
1、组件名为多个单词

组件名应该始终是多个单词的，根组件 App 以及 、 之类的 Vue 内置组件除外。

这样做可以避免跟现有的以及未来的 HTML 元素相冲突，因为所有的 HTML 元素名称都是单个单词的。

例如：

Vue.component(‘todo-item’, {
// …
})
export default { name: ‘TodoItem’, // … }

2、组件数据

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

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

例如：

Vue.component(‘some-comp’, {
data: function () {
return {
foo: ‘bar’
}
}
})
// In a .vue file export default { data () { return { foo: ‘bar’ } } }
// 在一个 Vue 的根实例上直接使用对象是可以的， // 因为只存在一个这样的实例。 new Vue({ data: { foo: ‘bar’ } })

3、Prop 定义

Prop 定义应该尽量详细。

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

例如：

props: {
status: String
}
// 更好的做法！ props: { status: { type: String, required: true, default: ‘’, } }

4、为 v-for 设置键值

总是用 key 配合 v-for。

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

例如：

• { { todo.text }}

5、避免 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、o