vue之虚拟dom的认识与理解

100 篇文章 5 订阅
虚拟DOM是为了解决频繁DOM操作导致的性能问题而提出的。它使用JavaScript对象模拟真实DOM,通过先在内存中进行修改,然后批量更新到实际DOM,以此提高渲染速度。Vue等MVVM框架利用虚拟DOM进行高效页面更新,降低了DOM操作的开销。本文介绍了虚拟DOM的基本概念和工作原理,并探讨了其在前端开发中的作用。
摘要由CSDN通过智能技术生成

前沿


  • 虚拟dom这个东东其实我之前也不知道,之前一直以为是因为vue等的这些mvvm框架就是因为数据驱动页面,减少了大量的dom操作,所以才会性能更好。
  • 知道又一次去面试,面试官问到知道为什么vue等的这些mvvm框架比传统的操作dom渲染页面要快么?我回答的就是第一条,他说不全是,不过最后还是跟我说了,回去了解一下虚拟dom
  • 所以才回去就赶紧看了看,现在有空,赶紧整理出来
  • 如果后期能理解更深,会持续更新的。

我也是了解之后才发现vue官网中有提出虚拟dom的概念,只不过是自己没有当回事罢了。

什么是虚拟dom

  • 文档对象模型或DOM定义了一个接口,该接口允许JavaScript之类的语言访问和操作HTML文档。元素由树中的节点
    表示,并且接口允许我们操纵它们。但是此接口需要付出代价,大量非常频繁的DOM操作会使页面速度变慢

  • 每个元素都是一个节点,每段文字也是一个节点,一个节点就是页面的额一部分,就像家谱一样,每个节点都有孩子节点。

  • 虚拟dom就是为了解决操作真是dom带来的性能问题而出现的,所以说,

  • 虚拟dom就是用js对象模拟真实的dom节点,也就是将所有的更新dom的操作先全部反映在js对象上(虚拟dom上)

  • 操作内存中的js对象显然速度要快很多,等更新完成后,再将最终的js对象映射到真是的dom上,交由浏览器去绘制页面。

  • 上边所说的js对象模拟真实的dom节点也就是官网中所说的(虚拟节点VNode.)
    看看官网怎么说

  •  

    vdom.png

  • 也就是这个原理大大提高了渲染速度。

    可能还有理解不到位的地方,后期在慢慢更新。 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

短暂又灿烂的

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值