虚拟DOM性能优化实战，同样是操作DOM，为什么说他快？

为什么说虚拟DOM快？

虚拟DOM不会进行排版与重绘操作
虚拟DOM进行频繁修改，然后一次性比较并修改真实DOM中需要改的部分（注意！），最后并在真实DOM中进行排版与重绘，减少过多DOM节点排版与重绘损耗
真实DOM频繁排版与重绘的效率是相当低的
虚拟DOM有效降低大面积（真实DOM节点）的重绘与排版，因为最终与真实DOM比较差异，可以只渲染局部（同2）
使用虚拟DOM的损耗计算：
总损耗=虚拟DOM增删改+（与Diff算法效率有关）真实DOM差异增删改+（较少的节点）排版与重绘
直接使用真实DOM的损耗计算：
总损耗=真实DOM完全增删改+（可能较多的节点）排版与重绘
总之，一切为了减弱频繁的大面积重绘引发的性能问题，不同框架不一定需要虚拟DOM，关键看框架是否频繁会引发大面积的DOM操作。

虚拟DOM优化实战

如果我有1000条数据，我修改了其中两条，真实的DOM会重新渲染1000条数据，只要发生了变化，就会重新渲染全部数据，虚拟dom 会生成1000个对象（它是不会被浏览器图形化渲染的），虚拟dom 里的东西会和真实dom绑定在一起，当数据发生变化虚拟dom和之前的虚拟dom 会去做数据的比较，当数据发生变化时，才会去更新数据发生改变的那部分真实的dom元素

但是数组没有默认的标识，所以数组每次改变都要重新排序，性能影响较大，所以在实时侦听遍历数组数据时，需要引入key属性，用来标识数组数据，一般使用下标标识

<template>
  <div>
      <ul><!--遍历数组时，添加 key 属性是为了优化vnode-->
        <li 
          v-for="(item,index) in list"
          :key="index" 
          @click="list.push('laowang')"
          >
          {{item}}
        </li>
      </ul>
  </div>
</template>
 
<script>
export default {
  mounted() {
    console.log(this);
  },
  data() {
    return {
      list: ["zhangsan", "lisi"]
    };
  }
};
</script>
 
<style>
</style>

下面我们谈一下DOM的key值，大家应该也在小程序，vue中遇到过for循环时，如果不给循环的标签一个key值，浏览器会console一个警告，那么这个key值究竟有什么用呢，以及为什么不建议用index做key值呢？

虚拟DOM性能优化实战，同样是操作DOM，为什么说他快？