- 性能损耗:列表渲染时会导致变动项往后的所有列表节点(内容)的更新(相当于
key
没发挥作用)。- 出现错误:某些节点在错误的位置被复用。(例如当列表项中使用到复选框时)
2.1 性能损耗
列表渲染时会导致变动项往后的所有列表节点(内容)的更新(相当于key
没发挥作用)。
需要注意的是,变动项往后所有列表节点的更新本质是节点属性的更新,节点本身会被复用。
<!-- 测试代码 -->
<template>
<div>
<div v-for="(item, index) in arr" :key="index 或 item.id">
{{item.data}}
</div>
</div>
</template>
<script>
export default {
name: 'HelloWorld',
data(){
return {
arr: Array.from({length: 10000}, (v, i) => {return {id: i, data: i}})
}
},
mounted(){
setTimeout(()=>{
/\*
1. this.shiftArr() // 删除首项
或
2. this.unShiftArr() // 在首部插入新项
\*/
}, 1000)
},
methods: {
shiftArr(){
this.arr.shift();
},
unshiftArr(){
this.arr.unshift({id: -1, data: -1});
}
}
}
</script>
上边的例子很简单,就是v-for
渲染一个长度为10000的列表,然后在Vue
mounted
1s后,执行一个删除列表首项或在列表头插入新项,观察两种key
绑定的具体页面更新开销。
页面开销使用chrome
的performance
选项卡来测算。
删除列表首项
列表头 unshift
新元素
2.2 出现错误
某些节点在错误的位置被复用。(例如当列表项中使用到复选框时)
<!-- 测试代码 -->
<template>
<div>
<button @click="test">删除列表第一项</button>
<div v-for="(item, index) in arr" :key="index 或 item.id">
<input type="checkbox" />
{{item.data}}
</div>
</div>
</template>
<script>
export default {
name: 'HelloWorld',
data(){
return {
arr: Array.from({length: 5}, (v, i) => {return {id: i, data: i}})
}
### 前端框架
前端框架太多了,真的学不动了,别慌,其实对于前端的三大马车,Angular、React、Vue 只要把其中一种框架学明白,底层原理实现,其他两个学起来不会很吃力,这也取决于你以后就职的公司要求你会哪一个框架了,当然,会的越多越好,但是往往每个人的时间是有限的,对于自学的学生,或者即将面试找工作的人,当然要选择一门框架深挖原理。
以 Vue 为例,我整理了如下的面试题。
![Vue部分截图](https://img-blog.csdnimg.cn/img_convert/c6738a80c94640db83f7ffbf487ac5f0.png)