为什么需要 Vue.js?虚拟 DOM

浏览 11

课文

这节课我们来了解 Vue.js 是如何利用虚拟 DOM 使网页更加健壮、具有高性能和易于管理的。 与其他前端框架类似,Vue.js 实现了虚拟 DOM(**Virtual DOM)**。乍一听可能令人生畏,但它的主要目的是**提高文档对象模型 (DOM)*更新*的性能和效率**。除此之外,虚拟 DOM 还提供了一些附加功能。 # 什么是 DOM? 当 Web 浏览器解析 HTML 页面时,它会创建一个表示 HTML 页面的*树状*数据结构。网页由具有子元素等的元素组成。将 DOM 视为将显示的网页存储在计算机内存中的数据结构。 浏览器读取 DOM 并相应地显示网页。要在网页中更改 DOM,浏览器将重新渲染网页。 浏览器提供了操作 DOM 的 API,例如document.createElement。 # 更新 DOM 的成本 如上所述,JavaScript 更新 DOM,然后由浏览器进行实际处理。在我们看不到的幕后,浏览器需要找到相关的 DOM 节点并进行所需的更改。 ```jsx document.getElementById('the_id').appendChild(aNewNode); ``` 在大多数现代应用程序中,DOM 可以包含数千个节点。因此,找到所需的节点可能是一项**计算成本很高的**任务!如果网页经常更新,即使变化很小,网页也会变慢。因此,搜索和更新 DOM 是 Web 应用程序性能的一个巨大瓶颈。 # 虚拟 DOM 我们可以将真实 DOM 表示为 JavaScript 对象,也就是所谓的**虚拟**DOM。请参阅以下表示为 JavaScript 对象的 Node 示例: ```jsx let DOM_node = { tag: 'ul', attributes: { id: 'the_Id' }, children: [] }; ``` 如果整个 DOM 像上面示例那样表示,它就可以被称为虚拟 DOM。 # 更新虚拟 DOM 在更新 DOM 时,将 DOM 表示为 JavaScript 对象的优势变得明显。现在,浏览器没有直接改变 DOM 树,而是由 Vue.js 来改变 JavaScript 对象(虚拟 DOM),这样性能是非常高的。 ```jsx DOM_node.children.push('<ul>List Item</ul>'); ``` 真实的 DOM 将如何改变? Vue.js 负责处理真实 DOM 与虚拟 DOM 的同步。它通过使用高度优化的sync函数来做到这一点。 ```jsx sync(actual_DOM_node, DOM_node); ``` 该sync函数将调用 DOM API 并批量或按比任意更新 DOM 或按照更好的顺序更新 DOM。 当虚拟 DOM 中的节点更新时,Vue 会将旧版本的 DOM 与新版本进行比较,并决定是否需要更改实际 DOM。这个过程称为 **diff**。如果需要更改,则只会更改关联的 DOM 节点,而 DOM 树的其余部分保持原样。 # 总结 虚拟 DOM 是 Vue.js 性能和效率的核心技术。与在真实 DOM 中搜索节点相比,在虚拟 DOM 中查找已更新节点的过程要快得多。通过这种方式,Vue.js 绕过了在大型 Web 应用程序中搜索和更新多个节点的性能开销。

评论

登录参与讨论

暂无评论

共 0 条
  • 1
前往
  • 1