【面试题】Vue的虚拟dom

是什么？（定义）

Vue中虚拟dom的本质就是js对象，由目标节点、目标属性和子节点组成。虚拟dom是真实dom的映射。

createElement(
    "ul",//目标节点
    //属性
    {
        attr: {
            id: "my-id"
        }
    },
    //子节点
    {
        createElement("li",1),
        createElement("li",2),
        createElement("li",3)
    }
)

注：Vue1.x没有虚拟dom

为什么使用？（优点）

因为虚拟dom可以减少dom操作造成的性能的浪费，从而提升渲染速度。

在哪里使用？（使用场景）

例如：一个ul标签下很多个li标签，其中只有一个li有变化，这种情况下，如果使用按照Vue1.x的原理，除了对变化的li标签进行修改外，也会将没有变化的li标签全部重新加载，造成了性能的浪费。那么从Vue2.x开始使用虚拟dom，通过虚拟dom（也就是js对象）将有变化的li标签进行修改，其余li标签不变，这样就减少了不必要的DOM操作所造成的性能浪费。

如何使用？（如何提升渲染效率）

首先分别形成Before和After的虚拟dom，然后由这两个虚拟dom（也就是js对象）通过Vue的Diff算法找到差异项，对相应节点进行更新，其余节点不会更新，这样就减少了dom操作，从而提升了渲染效率。

注：虚拟dom初次渲染比较慢