vue之虚拟dom的认识与理解

718 阅读2分钟

前沿


  • 虚拟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.) 看看官网怎么说

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

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