理解vue虚拟DOM

  什么是虚拟DOM ?

 ⽤ JavaScript 对象表示 DOM 信息和结构，更新后使之与真实dom保持同步，同步过程就是协调，核心是diff算法。

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

  • 每个元素都是一个节点，每段文字也是一个节点，一个节点就是页面的一部分.

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

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

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

  • 上边所说的js对象模拟真实的dom节点也就是官网中所说的（虚拟节点VNode.）

  为什么需要虚拟dom？

　虚拟DOM就是为了解决浏览器性能问题而被设计出来的。

　DOM操作很慢，轻微的操作都可能导致⻚面重新排版，⾮常耗性能。相对于DOM对象，js对象处理起来更快， 而且更简单。通过diff算法对比新旧vdom之间的差异，可以 批量的、最⼩化的执行dom操作，从而提高性能

　例如，若一次操作中有10次更新DOM的动作，虚拟DOM不会立即操作DOM，而是将这10次更新的diff内容保存到本地一个JS对象中，最终将这个JS对象一次性attch到DOM树上，再进行后续操作，避免大量无谓的计算量。简单来说，可以把Virtual DOM 理解为一个简单的JS对象，并且最少包含标签名( tag)、属性(attrs)和子元素对象( children)三个属性。

 

 

注：本文只是对虚拟DOM做一个简单的讲解

 

posted @ 2021-11-18 20:00  打遍天下吴敌手  阅读(335)  评论(0)  编辑  收藏  举报