vue虚拟DOM是什么？vue的虚拟DOM的用法

1、为什么需要虚拟DOM

前面我们从零开始写了一个简单的类Vue框架，其中的模板解析和渲染是通过Compile函数来完成的，采用了文档碎片代替了直接对页面中DOM元素的操作，在完成数据的更改后通过appendChild函数将真实的DOM插入到页面。

虽然采用的是文档碎片，但是操作的还是真实的DOM。

而我们知道操作DOM的代价是昂贵的，所以vue2.0采用了虚拟DOM来代替对真实DOM的操作，最后通过某种机制来完成对真实DOM的更新，渲染视图。

所谓的虚拟DOM，其实就是用JS来模拟DOM结构，把DOM的变化操作放在JS层来做，尽量减少对DOM的操作（个人认为主要是因为操作JS比操作DOM快了不知道多少倍，JS运行效率高）。然后对比前后两次的虚拟DOM的变化，只重新渲染变化了的部分，而没有变化的部分则不会重新渲染。

比如我们有如下的DOM结构。

<ul id="list">

      <li class="item1">Item 1</li>

      <li class="item2">Item 2</li>

</ul>

我们完全可以用JS对象模拟上面的DOM结构，模拟后就会变成下面的这种结构。

varvdom = {

    tag: 'ul',

    attr: {

        id: 'list',

    },

    children: