虚拟dom

使用JS直接对DOM进行修改操作和更新时，如果数据量过大，就会浪费大量的时间。
面对这个问题 我们可以使用虚拟DOM的方法来解决。

虚拟DOM

频繁且复杂的dom操作通常是前端性能瓶颈的产生点，Vue提供了虚拟dom的解决办法
虚拟的DOM的核心思想是：对复杂的文档DOM结构，提供一种方便的工具，进行最小化地DOM操作。

虚拟DOM的过程：
1.先在内存中生成 一个虚拟DOM树。
2.将内存中虚拟的DOM树渲染出来 变成真实的DOM树。
3.如果我们对 DOM树中的数据进行修改时 会将数据与之前的虚拟DOM树结合生成新的虚拟DOM树。
4.将 新的虚拟DOM树 与之前的 虚拟DOM树 使用diff算法进行结构对比。
5.将差异部分进行渲染到 真实的DOM上。

与直接操作DOM相比，虚拟DOM直接对内存数据进行操作 在需要时进行 DOM的渲染，因此在处理大量DOM时效率更高。

Diff算法

虚拟DOM会在DOM发生变化时进行Diff运算，用来更新需要改变的DOM结构。 在Diff算法中，只平层的比较前后两棵DOM树的节点，没有进行深度的遍历。

1.如果节点类型改变，直接将旧节点卸载，替换为新节点，旧节点包括下面的子节点都将被卸载，如果新节点和旧节点仅仅是类型不同，但下面的所有子节点都一样时，这样做也是效率不高的一个地方。
2.节点类型不变，属性或者属性值改变，不会卸载节点，执行节点更新的操作。
3.文本改变，直接修改文字内容。
4.移动，增加，删除子节点时：

如果在ＡＢＣＤＥ中添加Ｆ，会去找到Ｃ然后卸载Ｃ安装F ,卸载D 安装C,卸载E 安装D,最后安装E。
这种方式效率并不高,在Vue中我们可以通过为元素添加key的方式,让Vue根据key值找到对应的位置进行相关操作 这样效率就会提高。

实例:

<div id="app">
    <div>
        <button @click="add">添加</button>
    </div>

    <ul>
        <li v-for="(item,index) in list" :key="item.id">
            <input type="checkbox"> {{item.name}}
        </li>
    </ul>
</div>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            list: [
                {name: "张三", id: 1},
                {name: "李四", id: 2},
                {name: "王五", id: 3}
            ]
        },
        methods: {
            add() {
                
                this.list.unshift({name:"赵六",id:4});
            }
        }
    });
</script>

参考文章
Vue官方文档