1、v-for中使用:key
在操作列表渲染时,把:key属性与v-for一起使用,可以使vue对组件状态进行跟踪。
使用唯一的识别符,diff算法能更高效的更新DOM。
2、v-for和v-if尽量避免在同一元素上使用
在列表渲染时常遇到元素的筛选,这时就会自然而然的把v-for和v-if结合在一起
进行使用。但是,在使用时会发现有时只需要一个或者几个元素的值,而要去
遍历整个列表。这样就做了好多无用功。
遇到这种情况不妨使用computed,直接将满足条件的元素筛选出来。
<div v-for='item in newData'>筛选后的:{{item.name}}</div>
data () {
return {
oldData: [
{
id: 1,
name: 111
},
{
id: 2,
name: 222
},
{
id: 3,
name: 333
}
]
}
}
computed: {
// newData: function () {
// return this.oldData.filter(function (product) {
newData: (vm) => {
return vm.oldData.filter(function (product) {
return product.id > 2
})
}
}
3、指令简写
@ 是 v-on的简写
: 是 v-bind 的简写
# 是 v-slot 的简写
4、组件模板props、事件问题
模板使用使用短横线‘-’命名props、添加事件监听。在模板中,则要使用驼峰来生命。
为什么要这样生命呢?
以为在js中使用驼峰声明是标准,在HTML中使用短横线生命是标准。如果使用模板时,使用了
驼峰格式,那么在vue中则会把驼峰转换为短横线式的命名方式。
// props
props: {
detailData: {
type: Array
}
}
// 模板使用
<sub-tem @btn-click='clickFn' detail-data='data'></sub-tem>
5、正确定义props、校验props
props是用来接收来自父组件的数据。是单向数据流中重要的一环。
定义时props的类型是必须的生命的。可以是String,Array、Objec也可以是Datet等原生构造函数的一种。
使用validator函数对定义的props进行校验。
props: {
detailData: {
type: Array,
default: [1, 2],
required: true,
validator: function (value) {
// 若校验失败,控制台会有警告(开发环境)
return value.length > 2
}
}
}
6、不要在created、watch中直接调用方法
在created阶段调用方法的需求无非是希望组件是实例完成后立即调用的。
其实这种情况可以在 watch中实现。
具体使用查看:https://blog.csdn.net/jiuwanli666/article/details/104769467
7、单实例组件命名
单实例组件每个 页面使用一次,且不接受任何的props。
在定义时名称前面添加’The’来进行区别。
TheHeader.vue