虚拟Dom的基本理解 迈不过友情╰ 2022-12-26 09:11 74阅读 0赞 1、概念: 虚拟DOM其实就是用一个**`原生的JS对象去描述一个DOM节点`**,实际上它只是对真实 DOM 的一层抽象。最终可以通过一系列操作使这棵树映射到真实环境上。 相当于在js与DOM之间做了一个缓存,利用patch(**`diff算法`**)对比新旧虚拟DOM记录到一个对象中按需更新, 最后创建真实的DOM 2、虚拟dom原理流程 **`模板 ==> 渲染函数 ==> 虚拟DOM树 ==> 真实DOM`** * vuejs通过编译将模板(template)转成渲染函数(render),执行渲染函数可以得到一个虚拟节点树 * 在对 Model 进行操作的时候,会触发对应 Dep 中的 Watcher 对象。Watcher 对象会调用对应的 update 来修改视图。 **`虚拟 DOM 的实现原理主要包括以下 3 部分:`** 1. 用 JavaScript 对象模拟真实 DOM 树,对真实 DOM 进行抽象; 2. **`diff 算法`** — 比较两棵虚拟 DOM 树的差异; 3. **`pach 算法`** — 将两个虚拟 DOM 对象的差异应用到真正的 DOM 树。 图解:![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzkyNDIyOA_size_16_color_FFFFFF_t_70] > * **渲染函数:** 渲染函数是用来生成`Virtual DOM`的。 > * **VNode虚拟节点:** 它可以代表一个真实的dom节点。通过 `createElement` 方法能将 `VNode` 渲染成 dom 节点。简单地说,vnode可以理解成`节点描述对象`,它描述了应该怎样去创建真实的DOM节点 > * **patch(也叫做patching算法):** 虚拟DOM最核心的部分,它可以将vNode渲染成真实的DOM,这个过程是`对比新旧虚拟节点`之间有哪些不同,然后根据对比结果找出需要更新的的节点进行更新 3、虚拟DOM好处 * 具备跨平台的优势–由于 Virtual DOM 是以 `JavaScript 对象`为基础而不依赖真实平台环境,所以使它具有了跨平台的能力,比如说浏览器平台、Weex、Node 等。 * 操作 DOM 慢,js运行效率高。我们可以将DOM对比操作`放在JS层`,提高效率。运用patching算法来计算出真正需要更新的节点,最大限度地`减少DOM操作`,从而显著提高性能。Virtual DOM 本质上就是在 JS 和 DOM 之间做了一个缓存。 * 提升渲染性能 Virtual DOM的优势不在于单次的操作,而是在大量、频繁的数据更新下,能够对视图进行合理、`高效的更新` * 虚拟DOM就是为了`解决浏览器性能问题`而被设计出来的 [watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzkyNDIyOA_size_16_color_FFFFFF_t_70]: /images/20221120/8b4fbebbf2054c28b5ad1f26854a1960.png
还没有评论,来说两句吧...