组件名为多个单词
除了根组件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
移动至容器元素上 (比如