虚拟dom && diff算法 （ 王者 ）

1. 虚拟dom是什么？

• 简称vdom,它是一个Object对象模型，用来模拟真实dom节点的结构

2. 虚拟dom的使用基本流程

1. 获取数据（ ajax fetch ）

2. 创建vdom

   • vdom的由来？
     但是我们的网页结构一般都是很复杂的，这时我们使用vdom去模拟dom结构，发现vdom这个对象模型
     // 太大了，也长了，所以我们想，如果能在js中也能够书写 dom标签结构那就好了，所以结合了javascript // + xml 搞出了一个新的语法糖 jsx ，用jsx来模拟vdom

   	 <!-- vdom对象模型 -->
       var vdom = {
                   tag: 'div',
                   attr: {
                       className: 'box'
                   },
                   content: [{
                       tag: 'ul',
                       content: [{
                               tag: 'li',
                               content: data.name
                               }]
                       }]
               }
   

3. 通过render函数解析jsx(javascript + xml)，将其转换成 vdom结构

4. 将vdom渲染成真实dom // render函数

5. 数据更改了

6. 使用diff算法比对两次vdom,生成patch对象

7. 根据key将patch对象渲染（再次利用render函数）到页面中改变的结构上，而其他没有改变的地方是不做任何修改的（ 虚拟dom的惰性原则 ）

3. diff算法是什么？

• diff算法是比较两个文件的差异，并将这两个文件不同之处生成一个补丁对象（patch）。diff算法来源后端
  前端将其应用于虚拟dom的diff算法

4. diff算法运行结束之后，返回什么？

patch对象

5. 前端如何将其应用于虚拟dom的diff算法？

• vue中将虚拟dom的diff算法放在了patch.js文件中，使用js来进行两个对象的比较（ vdom 对象模型）
• 根据key将patch对象渲染到页面中改变的结构上，而其他没有改变的地方是不做任何修改的（ 虚拟dom的惰性原则 ）
  注意： vue是一是MVVM框架，Vue高性能的原因之一就是vdom

深化： Vue vdom vs React vdom 有何不一样？