如何理解虚拟DOM

最新推荐文章于 2024-03-31 00:23:00 发布
最新推荐文章于 2024-03-31 00:23:00 发布
阅读量213 收藏 2
点赞数
分类专栏： vue
--
本文链接：https://blog.csdn.net/qq_42177478/article/details/115397692
版权

1. 什么是虚拟dom

一个普通的js对象，我们可以在这里看到⬇️，描述了视图界面的结构

mounted(){
  console.log(this._vnode)
}

在vue中，每个组件都有一个render函数，每个render函数会返回一个虚拟dom树，也就是说每个组件都对应一棵虚拟dom树。

2.为什么需要虚拟dom

在vue中，试图渲染会调用render函数，这种渲染不仅发生在组建创建的时候，同时发生在试图依赖的数据更新的时候，如果渲染的时候直接使用真实的dom，真实dom的创建更新插入等操作会带来巨大的性能损耗，从而极大的降低渲染的效率。
所以vue在渲染的时候，使用虚拟dom代替真是dom，主要解决渲染效率问题，

3.虚拟dom怎么转换成真实dom的

在一组件第一次渲染的时候，会生成虚拟dom🌲，然后会根据虚拟dom🌲创建真实dom，并把真实dom挂在到页面中合适的位置，此刻，每个虚拟dom就会对应一个真实dom。
如果一个组件受响应式数据变化的影响，需要重新渲染的时候，他仍然会重新调用render函数，创建出一个新的虚拟dom🌲，用新🌲和旧🌲对比，找到最小更新量，然后更新必要的虚拟dom节点，最后通过更新这些节点，去修改真实的dom。

4.模版和虚拟dom是什么关系

vue框架中又一个compile模块，他主要负责将模版转换为render函数，而render函数调用后将得到虚拟dom。

编译的过程

  1. 将模版字符串转换成AST
  2. 将AST转换成render函数
啥时候能干全栈
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
虚拟DOM的实现
05-20
在提供的"test"文件中，可能包含了这样的实现代码，通过分析和运行这些代码，可以加深对虚拟DOM理解。 总的来说，虚拟DOM通过提供一种高效的方式来处理DOM更新，极大地提升了Web应用的性能和用户体验。它是现代前端...
vue 虚拟DOM的原理
10-14
主要介绍了vue 虚拟DOM的原理，帮助大家更好的理解和学习vue，感兴趣的朋友可以了解下
什么是虚拟dom
weixin_44059045的博客
12-09 2998
1. 对虚拟DOM的理解？ 从本质上来说，Virtual Dom是一个JavaScript对象，通过对象的方式来表示DOM结构。将页面的状态抽象为JS对象的形式，配合不同的渲染工具，使跨平台渲染成为可能。通过事务处理机制，将多次DOM修改的结果一次性的更新到页面上，从而有效的减少页面渲染的次数，减少修改DOM的重绘重排次数，提高渲染性能。 虚拟DOM是对DOM的抽象，这个对象是更加轻量级的对 DOM的描述。它设计的最初目的，就是更好的跨平台，比如Node.js就没有DOM，如果想实现SSR，那么一个方式
虚拟Dom的基本理解
Mark Sheng的博客
12-04 3512
1、概念： 虚拟DOM其实就是用一个原生的JS对象去描述一个DOM节点，实际上它只是对真实 DOM 的一层抽象。最终可以通过一系列操作使这棵树映射到真实环境上。 相当于在js与DOM之间做了一个缓存，利用patch（diff算法）对比新旧虚拟DOM记录到一个对象中按需更新， 最后创建真实的DOM 2、虚拟dom原理流程 模板 ==> 渲染函数 ==> 虚拟DOM树 ==> 真实DOM vuejs通过编译将模板（template）转成渲染函数（render），执行渲染函数可以得
理解虚拟dom
最新发布
wyzqhhhh的博客
03-31 943
虚拟 DOM是由一系列的 JavaScript 对象组成的树状结构，每个对象代表着一个DOM元素，包括元素的标签名、属性、子节点等信息。虚拟 DOM中的每个节点都是一个 JavaScript 对象，它们可以轻松地被创建、更新和销毁，而不涉及到实际的DOM操作。将目标所需的 UI 通过数据结构“虚拟”地表示出来，保存在内存中，然后将真实的DOM与之保持同步。
深入理解虚拟DOM：原理、优势与实践
球球不吃虾WHR2349博客
01-13 1563
虚拟DOM（Virtual DOM）是一个编程概念，它是对真实DOM（Document Object Model）内存中的抽象表示。虚拟DOM本身并不是一个真实的DOM节点，而是一个轻量级的JavaScript对象，它模拟了真实DOM树的结构和属性。开发者通过操作虚拟DOM，可以间接地更新真实DOM，而不需要直接进行频繁的DOM操作，从而提高Web应用的性能。自定义虚拟DOM实现是一个有趣但具有挑战性的任务。
什么是虚拟DOM？虚拟DOM的定义和作用？
屈小康
09-03 1万+
虚拟DOM的作用和定义 什么是虚拟DOM 虚拟DOM就是普通的js对象。是一个用来描述真实dom结构的js对象，因为它不是真实的dom，所以才叫做虚拟dom。 虚拟dom的作用 我们都知道传统的dom数据发生变化的时候，我们都需要不断的去操作dom，才能更新dom数据，虽然后面出现了模板引擎，可以让我们一次性更新多个dom。但模板引擎依旧没有一种可以追踪状态的机制，当引擎内某个数据发生变化时，它依然操作dom去重新渲染整个引擎。 而虚拟dom可以很好地跟踪当前dom状态，因为它会根据当前数据生成一
虚拟dom1
08-08
虚拟DOM是一种在JavaScript中模拟真实DOM树的概念，它在现代前端框架如Vue.js中起着核心作用。虚拟DOM的主要目标是提高...理解虚拟DOM的工作原理对于前端开发者来说至关重要，可以帮助他们编写出更高效、可维护的代码。
smevdom虚拟DOM组件
08-12
**虚拟DOM（Virtual DOM）**是现代Web开发中的一个重要概念，尤其在JavaScript框架如Vue.js中扮演着核心角色。...对于希望深入理解虚拟DOM机制或者寻求轻量级解决方案的开发者，SMEVDOM是一个值得研究和使用的工具。
虚拟 dom
lk19910323的博客
04-26 289
虚拟 dom 是利用 js 描述元素与元素的关系，用 js 对象来表示真实的 DOM 树结构，创建一个虚拟 DOM 对象 由于在浏览器中操作 DOM 是很昂贵的。频繁的操作 DOM，会产⽣⼀定的性能问题. 在组件渲染的时候会调用 render 函数，这个函数会生成一个虚拟 dom，再根据这个虚拟 dom 生成真实的 dom，然后这个真实的 dom 会挂载到我们的页面中。 如果只是渲染一个页面后期不改动的话 那么虚拟 dom 其实成本更高 因为 都要渲染成真实的 dom 如果组件内有响应的数据，数据发生改变的
什么是虚拟DOM
热门推荐
黑山老妖的小站
08-11 3万+
什么是虚拟DOM？ virtual DOM 虚拟DOM，用普通js对象来描述DOM结构，因为不是真实DOM，所以称之为虚拟DOM。 虚拟 dom 是相对于浏览器所渲染出来的真实 dom而言的，在react，vue等技术出现之前，我们要改变页面展示的内容只能通过遍历查询 dom 树的方式找到需要修改的 dom 然后修改样式行为或者结构，来达到更新 ui 的目的。 这种方式相当消耗计算资源，因为每次查询 dom 几乎都需要遍历整颗 dom 树，如果建立一个与 dom 树对应的虚拟 dom 对象（ js 对象），
说说你对虚拟DOM的理解？
UUID、
03-09 135
如果这时响应式数据发生变化，就会引起重新reder,此时就会生成新的vdom，这时新旧Dom就会进行diff算法，得到一个清单（最小的dom操作），然后进行视图更新。（2）.操作 dom 是比较昂贵的操作，频繁的dom操作容易引起页面的重绘和回流，但是通过抽象VNode 进行中间处理，可以有效减少直接操作dom的次数，从而减少页面重绘和回流。以上就是我对虚拟DOM的理解,如果文章由于我学识浅薄,导致您发现有严重谬误的地方,请一定在评论中指出,我会在第一时间修正我的文章,以避免误人子弟。
虚拟DOM理解
weixin_49857754的博客
03-19 112
在同一事件循环的时间内如果多次操作DOM，虚拟dom的做法是进行虚拟dom树进行对比，diff算法这些，找出存在需要更新的dom节点然后重构虚拟dom树，在进行一次性渲染，这样就打打提高了性能，因为操作DOM它并没有比innerhtml快，但是我们不可能每一个地方进行优化DOM 操作。又因为虚拟DOM本质上是一个JS对象，所以。，这也是我们使用框架的原因。个人见解，如有错误，欢迎指出）
虚拟dom的理解
weixin_47128751的博客
03-27 1091
虚拟dom的理解 是什么 2. 能做什么 3. 如何做的 4. 做的怎么样 虚拟dom 就是描述真实dom 的js对象 优点： - 处理了浏览器兼容问题，避免用户操作真实dom - 内容经过了xss处理，可以防范xss攻击 - 实现了跨平台开发android，ios等 - 更新的时候可以实现差异更新，减少更新dom 的炒作 缺： - 虚拟dom的构建需要消耗额外的内存 - 首次渲染不一定更快 函数组件和类组件的相同不同点 相同点 - 都可以接受属性并且返回r
对虚拟DOM的理解
actsdgg的博客
06-02 743
虚拟DOM 什么是虚拟DOM 简单来说虚拟DOM就是用JS来模拟DOM结构。相对于浏览器渲染出来的真是DOM。 //1.内存中生成一颗虚拟dom树 <div id="content"><p>2</p><ul class="list-group"></ul></div> var vDom = { ...
虚拟DOM - 我理解中的虚拟dom
qq_18196779的博客
02-22 424
1、虚拟DOM是什么 一句话：虚拟DOM就是用普通js对象来描述DOM结构 真实的DOM 虚拟DOM 2、对虚拟DOM速度的讨论和其它优势 首先，虚拟dom存在并不是必要的，反而虚拟dom并不总是比真实dom快，我们也看到也有很多优秀的框架并没有采用虚拟dom，例如Svelte，它依然很快。 我们来比较一下时间复杂度， 使用虚拟dom：js生成虚拟dom + diff算法 + 渲染必要的dom更新 不实用虚拟dom： js操作时间（innerHTML 的总计算量） + 重新创建所有的dom 乍
深度剖析：如何实现一个 Virtual DOM 算法
weixin_34279184的博客
11-22 155
作者：戴嘉华 转载请注明出处并保留原文链接（ https://github.com/livoras/blog/issues/13 ）和作者信息。 目录： 1 前言 2 对前端应用状态管理思考 3 Virtual DOM 算法 4 算法实现 4.1 步骤一：用JS对象模拟DOM树 4.2 步骤二：比较两棵虚拟DOM树的差异 4.3 步...
vue 虚拟 DOM理解
08-20
Vue 的虚拟 DOM 是一种在内存中以 JavaScript 对象的形式表示页面结构的技术。它是 Vue 在渲染页面时的一个关键概念。 传统的 DOM 操作是直接操作页面上的实际 DOM 元素，而虚拟 DOM 则是通过 JavaScript 对象来描述页面结构。当数据发生变化时，Vue 会先更新虚拟 DOM，然后通过比较新旧虚拟 DOM 的差异，最后只对实际需要更新的部分进行重新渲染，这样可以减少实际 DOM 操作的次数，提高性能。 使用虚拟 DOM 的好处有以下几点： 1. 性能优化：通过比较新旧虚拟 DOM 的差异，只更新需要更新的部分，减少实际 DOM 操作次数，提高渲染性能。 2. 跨平台支持：由于虚拟 DOM 是以 JavaScript 对象的形式存在，因此可以在不同的平台上使用，例如浏览器、移动端、服务器端等。 3. 方便的抽象层：Vue 的虚拟 DOM 提供了一种方便的抽象层，使开发者可以更轻松地操作页面结构，而不需要直接操作实际 DOM 元素。 总的来说，Vue 的虚拟 DOM 技术能够提高性能，并且使开发更加方便和灵活。通过对比新旧虚拟 DOM 的差异，只更新需要更新的部分，减少了实际 DOM 操作的开销，提高了页面渲染的效率。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值