首页 > 其他 > 详细

vue学习(三)

时间:2020-09-11 09:36:14      阅读:65      评论:0      收藏:0      [点我收藏+]

一、Virtual DOM

virtual dom 是dom节点在javascript中的一种抽象数据结构,之所以需要需要dom,是因为浏览器操作dom的代价非常高,频繁操作dom会产生性能问题。虚拟dom的作用是在每一次响应式数据发生变化引起页面重新渲染时,Vue对比更新前后的虚拟dom,匹配出尽可能少的需要更新的真实dom,从而达到提升性能的目的

 

二、介绍一下Vue中的Diff算法

在新老虚拟DOM对比时

  • 首先,对比节点本身,判断是否为同一节点,如果不为相同节点,则删除该节点重新创建节点进行替换
  • 如果为相同节点,进行patchVnode,判断如何对该节点的子节点进行处理,先判断一方有子节点一方没有子节点的情况(如果新的children没有子节点,将旧的子节点移除)
  • 比较如果都有子节点,则进行updateChildren,判断如何对这些新老节点的子节点进行操作(diff核心)。
  • 匹配时,找到相同的子节点,递归比较子节点

在diff中,只对同层的子节点进行比较,放弃跨级的节点比较,使得时间复杂从O(n^3)降低值O(n),也就是说,只有当新旧children都为多个子节点时才需要用核心的Diff算法进行同层级比较。

vue学习(三)

原文:https://www.cnblogs.com/freefy/p/13649275.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!