Vue虚拟DOM和Diff算法
分类:
文章
•
2024-11-19 23:15:39
虚拟DOM
- 所谓的virtual dom，也就是虚拟节点。它通过JS的Object对象模拟DOM中的节点，然后再通过特定的render方法将其渲染成真实的DOM节点 dom diff 则是通过JS层面的计算，返回一个patch对象，即补丁对象，在通过特定的操作解析patch对象，完成页面的重新渲染
- virtual dom的渲染流程
- 通过数据拦截[es5 中 Object.defineProperty 中 getter和setter来实现的]对数据进行设置
- 通过vdom模拟真实dom结构
- 通过特定的render方法将vdom解析
- 渲染真实dom
- 当数据改变是会再次生成vdom
- 通过diff算法统计比较新旧vdom，生成patch补丁对象
- 重新渲染真实dom[只渲染变化的部分]
diff算法
- diss算法来源于后端思想，用于比较两个文件的不同
- vue中diss算法是js层面的尖酸，是同层级比较
- diss算法比较后的结果是生成耦合patch补丁对象
jsx
- jsx是javascript + xml ,在js中可以书写dom结构
- 为什么vue要使用jsx？
- 当dom结构比较复杂的时候，我们要vdom模拟就会变得复杂，复杂度增大
- jsx -> vdom对象模型 -> diff -> patch
- vue中提供了一个render,通过createElement来生成vNode
- vue中jsx需要被解析为vdom对象模型
