详解虚拟DOM

我们都知道在前端优化性能一个秘诀就是尽可能少地操作DOM，使用虚拟DOM能更新DOM节点，提升渲染性能。

虚拟的DOM的核心思想：对复杂的文档DOM结构，提供一种方便的工具，使得开发效率得到保证。进行最小化的DOM操作，使得执行效率得到保证。

虚拟dom的框架/工具都是这么做的：
1、根据虚拟dom树最初渲染成这是dom。
2、当数据变化，或者说是页面需要重新渲染的时候，会重新生成一个新的完整的虚拟dom。
3、拿新的虚拟dom来和旧的虚拟dom做对比（使用diff算法），得到需要更新的地方后，更新内容。

什么是虚拟dom?与key值的关系？
Virual DOM是用JS对象记录一个dom节点的副本，当dom发生够改变的时候，先用虚拟dom进行diff，算出最小差异，然后再修改真实dom。

虚拟DOM的Diff算法
1、如果节点类型改变，直接将纠结点卸载，替换为新节点，旧节点包括下面的子节点都将被卸载，如果新节点和旧节点仅仅是类型不同，但下面的所有子节点都一样时，这样做效率也不高。
2、节点类型不变，属性或者属性值改变，不会卸载节点，执行节点更新的操作。
3、文本改变，直接修改文字内容。
4、移动、增加、删除子节点时，如果想在中间插入节点F，做法就是：卸载C，装载F，卸载D，装载C，卸载E，装载D，装载E，如下图：

写代码时，如果没有给数组或枚举类型定义一个key，就会采用上面的算法。如果为元素增加key后，Vue就能根据Key，直接找到具体的位置进行操作，效率较高。如下图：

例子：
没有key:

<div id="app">
        <button @click="add">添加</button>
        <ul>
            <li v-for="item in list">
                <input type="checkbox">{{item}}
            </li>
        </ul>
    </div>
    <script>
        new Vue({
            el:"#app",
            data:{
                list:["跑步","跳舞","瑜伽"]
            },
            methods:{
                add(){
                    this.list.unshift("打球");
                }
            }
        })
    </script>

本来选中跑步

点击添加后，变成选中打球

因为没有给元素加key，就会采用先卸载后装载的方法。
如果我们给元素加key，这样每一项都有一个key属性，每一项都有唯一的id。

<div id="app">
        <button @click="add">添加</button>
        <ul>
            <li v-for="item in list" :key="item.id">
                <input type="checkbox">{{item.name}}
            </li>
        </ul>
    </div>
    <script>
        new Vue({
            el:"#app",
            data:{
                list:[
                    {name:"跑步",id:1},
                    {name:"跳舞",id:2},
                    {name:"瑜伽",id:3}
                ]
            },
            methods:{
                add(){
                    this.list.unshift({name:"打球",id:4});
                }
            }
        })
   	</script>

本来选中的跑步

点击添加打球，选中的还是跑步