Vue 中的 Virtual Dom

谁践踏了优雅 2021-10-25 12:12 295阅读 0赞

Vue.js 2.0引入Virtual DOM,比Vue.js 1.0的初始渲染速度提升了2-4倍，并大大降低了内存消耗；

vue中模板转换成视图的大致过程是：vue.js 通过编译将 template 模板转换成渲染函数（render），执行渲染函数就可以得到一个虚拟的节点；然后在对 model 进行操作的时候，会触发 Dep 中的 Watcher 对象； watcher 对象会调用相应的 update 来修改视图，这个过程主要是将新旧虚拟节点进行差异对比，然后根据对比进行 DOM 操作来更新视图；在这个过程中主要涉及了几个概念：渲染函数、VNOde虚拟节点、patch(patching算法)；

渲染函数：主要是用来生成 virtual DOM 的；vue 虽然推荐使用 template 来构建页面，但是其实也是支持直接写渲染函数的；

VNode虚拟节点：它是节点描述，可以代表一个真实的dom，最终真实的dom就是通过createElement将VNode渲染成真实的dom的；

patch(也叫patching算法)：它是虚拟dom最核心的部分，VNode最终就是经过这个算法成为真实的dom的，这个过程是对比新旧节点之间的不同，然后根据对比结果找出需要更新的节点进行更新；

Virtual DOM 简单的说就是一颗树，一颗以javaScript对象（VNode）作为基础的树，用对象的属性来描述节点，因此这个对象至少包含标签名（tag）、属性（attrs）、和 子元素对象（chuildren）

Virtual DOM 的最终目的是将虚拟的节点渲染到视图上，其实它主要做了两件事：(1)、提供与真实DOM节点对应的虚拟节点VNode；(2)、将虚拟节点VNode和旧虚拟节点(oldVNode)进行对比，然后更新视图；

Virtual DOM 的优势：

(1)、具备跨平台的优势；

(2)、操作DOM慢，js运行的效率高；vue 将DOM对比放在js层，提高效率，Virtual DOM 本质上其实就是js 和 dom 之间的一个缓存，通过 patching 算法计算出真正需要更新的节点，最大限度的减少DOM操作；

(3)、提升渲染的性能；dom操作的减少，可以避免更多的回流和重绘等，更加高效的提高性能

转载于:https://www.cnblogs.com/mufc/p/11131203.html

发表评论取消回复

表情：

评论列表（有 0 条评论，295人围观）

还没有评论，来说两句吧...

相关阅读

相关解释一下前端框架中的虚拟DOM（virtual DOM）和实际DOM（real DOM）之间的关系。

聚沙成塔·每天进步一点点 ⭐ 专栏简介前端入门之旅：探索Web开发的奇妙世界欢迎来到前端入门之旅！感兴趣的可以订阅本专栏哦！这个专栏是为那些对Web开发感

痛定思痛。/ 2024年04月06日 15:30/ 0 赞/ 10 阅读

相关 [Vue]Shadow DOM Virtual DOM 异同点

在乐元素的笔试中考了这题，因为没有经常接触ElementUI，所以不了解Shadow Dom，在此记录：相同点：创建Document Object Model，优化性能。

迈不过友情╰/ 2022年12月08日 04:28/ 0 赞/ 72 阅读

相关 Virtual DOM Diff算法

![format_png][] Diff算法的作用是用来计算出 Virtual DOM 中被改变的部分，然后针对该部分进行原生DOM操作，而不用重新渲染整个页面。 Dif

落日映苍穹つ/ 2022年11月29日 05:58/ 0 赞/ 134 阅读

相关【JS】922- Virtual DOM 认知中的一些误区

![9211afacaf6f0747369f6ec30b4278ec.png][] 在当下最流行的两个前端框架都存在 Virtual DOM 的前提下，渐渐比较多的听到类似

朱雀/ 2022年11月17日 10:09/ 0 赞/ 121 阅读

相关 React - Virtual Dom

详情看官网：[协调（Reconciliation）][Reconciliation] 别人的demo演示：[Demo][] 记得打开控制台看输出！！！一句话，记得在各个

矫情吗；*/ 2022年04月15日 02:57/ 0 赞/ 109 阅读

相关深度理解 Virtual DOM

![20181226163719462][] 目录： [1 前言][1] [2 技术发展史][2] [3 Virtual DOM 算法][3 Virtual DOM]

野性酷女/ 2022年04月02日 12:16/ 0 赞/ 150 阅读

相关理解 Virtual DOM

原文出处：[https://github.com/y8n/blog/issues/5][https_github.com_y8n_blog_issues_5] 前言使

缺乏、安全感/ 2022年03月27日 10:56/ 0 赞/ 140 阅读

相关 Virtual DOM diff算法

首先浏览器加载一个HTML页面时会经过创建DOM 树、创建样式规则（style rules）、构建渲染树（render tree）、布局layout 和绘制页面（painti

小咪咪/ 2022年03月11日 07:15/ 0 赞/ 162 阅读

相关 Vue 中的 Virtual Dom

　　Vue.js 2.0引入Virtual DOM,比Vue.js 1.0的初始渲染速度提升了2-4倍，并大大降低了内存消耗；　　vue中模板转换成视图的大致过程是：vue

谁践踏了优雅/ 2021年10月25日 12:12/ 0 赞/ 296 阅读

相关 Vue Render函数与Virtual Dom

1. 什么是Virtual Dom React与Vue 2 都是使用是Virtual Dom技术，Virtual Dom技术并不是真正的Dom，而是一个轻量级的Java

ゝ一世哀愁。/ 2021年09月27日 15:26/ 0 赞/ 250 阅读