vdom、diff、jsx

vdom

---

vdom的渲染流程

第一次时
template模板使用jsx语法进行编辑
通过render函数将jsx解析为 vdom 对象模型
将VDOM对象模型渲染为真实DOM,然后挂载到页面中
当我们的数据发生改变时
重新生成VDOM

为什么vue会使用vdom?

快 【 操作数据比操作真实dom要快】

关于vdom面试题

1. 为什么vue会使用vdom-
2. vdom是什么？
3. 是否了解diff算法
  - diff算法来源于后端思想，用于比较两个文件的不同
  - vue中diff算法是js层面的计算，是同层级比较
  - diff算法比较后的结果是生成一个patch补丁对象
4. vue中渲染的流程
  - 1. 通过数据拦截【 es5 Object.defineProperty 中getter和setter来实现的】 对数据进行设置
  - 2. 通过vdom模拟真实dom结构
  - 3. 通过特定的render方法将vdom解析
  - 4. 渲染真实dom
  - 5. 当数据改变时，又会再次生成vdom
  - 6. 通过diff算法同级比较新旧vdom,生成patch补丁对象
  - 7. 重新渲染真实dom[ 只渲染变化的部分 ]

diff

---

diff算法来源于后端思想，用于比较两个文件的不同
  - vue中diff算法是js层面的计算，是同层级比较
  - diff算法比较后的结果是生成一个patch补丁对象

jsx

---

jsx是什么？

jsx是javascript + xml  ,在js中可以书写dom结构

为什么vue要使用jsx?

当dom结构比较复杂的时候，我们要vdom模拟就会变得复杂，复杂度增大 
如果我们能够在js中书写dom结果就好了
  ```js
     <div>
        <p></p>
     <div>
  ```
那么， jsx就来了
jsx -> vdom对象模型 ->  diff -> patch
vue中提供了一个render,通过 createElement 来生成vNode 

vue中jsx需要被解析为vdom对象模型

  core  核心算法001c:.:0:3:1