一.组件的 data 必须是一个函数。
当在组件中使用 data 属性的时候 (除了 new Vue 外的任何地方),它的值必须是返回一个对象的函数 data() { return { listTitle: '', todos: [] } }
二.Prop 定义尽量详细
prop 的定义应该尽量详细,至少需要指定其类型
props: {
status: {
type: String,
required: true,
validator: function (value) {
return [
'syncing',
'synced',
'version-conflict',
'error'
].indexOf(value) !== -1
}
}
}
三.v-for 必须要设置键值
在组件上总是必须用 key 配合 v-for,以便维护内部组件及其子树的状态。甚至在元素上维护可预测的行为,比如动画中的对象固化 (object constancy),也是一种好的做法。
<ul>
<li
v-for="todo in todos"
:key="todo.id"
>
{{ todo.text }}
</li>
</ul>
四.不要把 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)。
<ul v-if="shouldShowUsers">
<li
v-for="user in users"
:key="user.id"
>
{{ user.name }}
</li>
</ul>
五.布尔类型的attribute, 为true时直接写属性值
<MyComponent
foo
/>
六.组件通信
7.1 通过 prop 和事件进行父子组件之间的通信,而不是 this.parent 能够简化两个深度耦合的组件。 问题在于,这种做法在很多简单的场景下可能会更方便。但请当心,不要为了一时方便 (少写代码) 而牺牲数据流向的简洁性 (易于理解)。
七.vue文件内容书写顺序
7.1 内部顺序
template -> script -> style
7.1 script 默认结构编写顺序和规则
components -> data -> props -> 生命周期函数 -> computed -> watch -> methods -> filter…
八.不要在computed中对vue变量进行操作
computed中不能对与该属性return值无关的vue变量进行set/get操作
fullName(val) {
this.thirdName = val + ':';
return this.firstName + this.lastName;
}
九.生命周期各个钩子函数中执行的事情
created 中进行apiRequest
mounted 中进行 addEvent
beforeDestory中进行removeEvent