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
