Vue进阶（幺伍幺）：Vue 应用 key 提升页面渲染性能_vue 在对象中取key会影响性能吗(1)

• 性能损耗：列表渲染时会导致变动项往后的所有列表节点(内容)的更新（相当于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)