v-for Vue风格指南

1. v-for设置key值

key的值应当是遍历元素的某个唯一属性,例如 item.id,而不是遍历的序号index。直接把key的值绑定为index, 可能会引起不必要的bug

1
2
3
4
5
6
7
8
9
10
11
12
13
// good
<ul>
<li v-for="(item,index) in list" :key="item.id">
{{ todo.text }}
</li>
</ul>

// very bad
<ul>
<li v-for="(item,index) in list" :key="index">
{{ todo.text }}
</li>
</ul>

如果要遍历的对象没有一个唯一的id, 非常建议给要遍历的元素加上唯一的id。推荐使用nanoid

1
2
3
4
5
6
7
8
9
10
11
12
13
14
import nanoid from 'nanoid'

...
someAjax()
.then((res)=>{
res.users.forEach((item)=>{
item.id = nanoid()
})
this.users = res.users
})
.catch((err)=>{
console.error(err)
})
...

2. v-for元素一定要是对象

除非是最简单的渲染,如果要在渲染期间改变某个元素值,那么只能将简单元素构造为对象。

1
2
3
4
5
6
7
8
9
10
11
// very bad
var example1 = new Vue({
el: '#example-1',
data: {
items: ['a', 'b', 'c']
}
})

<div id="example-1">
<input v-for="item in items" v-model="item">
</div>
1
2
3
4
5
6
7
8
9
10
11
// good
var example1 = new Vue({
el: '#example-1',
data: {
items: [{id:1, value:'a'}, {id: 2, value:'b'}, {id:3, value:'c'}]
}
})

<div id="example-1">
<input v-for="item in items" :key="item.id" v-model="item.value">
</div>

3. v-for不要和v-if一起使用

一般情况下,列表中的元素需要按照某些条件进行显示或者隐藏,那么建议使用计算属性。

好处:

  • 渲染效率更高
  • 解藕渲染层的逻辑,可维护性更强
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
// very bad
var example1 = new Vue({
el: '#example-1',
data: {
items: [
{id:1, value:'a', show: true},
{id:2, value:'b', show: false},
{id:3, value:'c', show: false}
]
}
})

<div id="example-1">
<input v-for="item in items" v-if="item.show" :key="item.id" v-model="item.value">
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
// very good
var example1 = new Vue({
el: '#example-1',
data: {
items: [
{id:1, value:'a', show: true},
{id:2, value:'b', show: false},
{id:3, value:'c', show: false}
]
},
computed: {
itemsShow: function(){
return this.items.filter(function(item){
return item.show
})
}
}
})

<div id="example-1">
<input v-for="item in itemsShow" v-if="item.show" :key="item.id" v-model="item.value">
</div>
请我喝杯茶