vue中虚拟dom和diff算法

什么是虚拟dom

通过js创建一个Object对象来模拟真实DOM结构，这个对象包含标签名 (tag)、属性 (attrs) 和子元素对象 (children) 三个属性，通过vue中的render()函数把虚拟dom编译成真实dom，在通过appendChild()添加到页面中。
所谓的Virtual dom，也就是我们常说的虚拟节点，它是通过JS的Object对象模拟DOM中的节点，然后再通过特定的render方法将其渲染成真实的DOM的节点。

为什么使用虚拟DOM

虚拟DOM的出现也是为了减弱频繁的大面积重绘引发的性能问题！

既然知道了什么是虚拟DOM，那为什么在Vue或者React这样的框架中，会考虑采用这样的方式？

其实在我们使用JQuery这样的库的时候，我们不禁会大量操作DOM，那么DOM元素的变化自然会引起页面的回流或者重绘，页面的DOM重排自然会导致页面性能下降，那么如何尽可能的去减少DOM的操作是框架需要考虑的一个重要问题！

真实DOM和虚拟DOM的区别

虚拟DOM不会进行排版与重绘操作
真实DOM频繁排版与重绘的效率是相当低的
虚拟DOM进行频繁修改，然后一次性比较并修改真实DOM中需要改的部分，最后并在真实DOM中进行排版与重绘，减少过多DOM节点排版与重绘损耗
虚拟DOM有效降低大面积（真实DOM节点）的重绘与排版，因为最终与真实DOM比较差异，可以只渲染局部

看两段简单的代码，也许会更容易理解：

这是一段真实DOM的代码：

<div>
<p>test</p>
</div>

这是一段虚拟DOM的伪代码：

var Vnode = {
tag: 'div',
children: [
{ tag: 'p', text: 'test' }
]
};

DOM Diff

说完了虚拟DOM，我们了解到，这是一种为了尽可能减少页面频繁操作DOM的方式，那么在虚拟DOM中，通过什么方式才能做到呢，接下来便要说说DOM DiffDOM Diff指的是通过Diff算法去比较虚拟DOM的变化
diff 算法就是进行虚拟节点对比，并返回一个patch对象，用来存储两个节点不同的地方，最后用patch记录的消息去局部更新Dom。

换句话说：

diff 的过程就是调用名为patch的函数，比较新旧节点，一边比较一边给真实的DOM打补丁

总结

当数据发生改变时，订阅者watcher就会调用patch给真实的DOM打补丁
通过isSameVnode进行判断，相同则调用patchVnode方法
patchVnode做了以下操作

找到对应的真实dom，称为el
如果都有都有文本节点且不相等，将el文本节点设置为Vnode的文本节点
如果oldVnode有子节点而VNode没有，则删除el子节点
如果oldVnode没有子节点而VNode有，则将VNode的子节点真实化后添加到el
如果两者都有子节点，则执行updateChildren函数比较子节点

updateChildren主要做了以下操作：

设置新旧VNode的头尾指针
新旧头尾指针进行比较，循环向中间靠拢，根据情况调用patchVnode进行patch重复流程、调用createElem创建一个新节点，从哈希表寻找 key一致的VNode 节点再分情况操作

vue中虚拟dom和diff算法相关推荐

学习Vue3 第五章（Vue核心虚拟Dom和 diff 算法）
为什么要学习源码 1.可以提升自己学习更优秀的API设计和代码逻辑 2.面试的时候也会经常问源码相关的东西 3.更快的掌握vue和遇到问题可以定位介绍虚拟DOM 虚拟DOM就是通过JS来生成一个AS ...
vue 虚拟dom和diff算法详解
虚拟dom是当前前端最流行的两个框架(vue和react)都用到的一种技术,都说他能帮助vue和react提升渲染性能,提升用户体验.那么今天我们来详细看看虚拟dom到底是个什么鬼虚拟dom的定义与 ...
vue之购物车案例升级版、v-model之lazy、number、trim的使用、fetch和axios、计算属性、Mixins、虚拟dom与diff算法 key的作用及组件化开发
文章目录 1.购物车案例升级版(含价格统计.全选/反选.商品增加减少) 2.v-model之lazy.number.trim的使用 3.fetch和axios 3.1.通过jquery+ajax实现v ...
【Vue源码解析】Vue虚拟dom和diff算法
Vue虚拟dom和diff算法 1. 简介 2. 搭建环境 1. 安装snabbdom 2. 安装webpack5并配置 3.函数 3.1 虚拟节点vnode的属性 3.2 使用h函数创建虚拟节点 ...
虚拟DOM和Diff算法 - 入门级
什么是虚拟Dom 我们知道我们平时的页面都是有很多Dom组成,那虚拟Dom(virtual dom)到底是什么,简单来讲,就是将真实的dom节点用JavaScript来模拟出来,而Dom变化的对比,放 ...
Vue中虚拟DOM的理解
Vue中虚拟DOM的理解 Virtual DOM是一棵以JavaScript对象作为基础的树,每一个节点称为VNode,用对象属性来描述节点,实际上它是一层对真实DOM的抽象,最终可以通过渲染操作使这 ...
vue--mixin混入以及虚拟DOM和diff算法
mixin混入使用它的好处: 将 options 中的配置项可以单独抽离出来,单独管理,这样方便维护使用: 新建一个对象用来保存 options 中某一个配置项,比如: methods 接下来要将 ...
深入浅出虚拟 DOM 和 Diff 算法，及 Vue2 与 Vue3 中的区别
因为 Diff 算法,计算的就是虚拟 DOM 的差异,所以先铺垫一点点虚拟 DOM,了解一下其结构,再来一层层揭开 Diff 算法的面纱,深入浅出,助你彻底弄懂 Diff 算法原理认识虚拟 DOM ...
探秘vue核心之虚拟DOM与diff算法
探秘vue核心之虚拟DOM与diff 一.真实DOM和其解析流程所有的浏览器渲染引擎工作流程大致分为5步: 创建 DOM 树 -> 创建 Style Rules -> 构建 Render ...
浏览器性能优化（2）React 虚拟 dom与diff算法
随着前端技术快速发展,现在的mvvm几大框架遍布前端行业,那么它们对浏览器的性能到底影响多大?与传统的jq相比做了哪些优化呢? 文章目录: React中的虚拟DOM是什么? 虚拟DOM的简单实现(di ...

vue中虚拟dom和diff算法

什么是虚拟dom

为什么使用虚拟DOM

既然知道了什么是虚拟DOM，那为什么在Vue或者React这样的框架中，会考虑采用这样的方式？

真实DOM和虚拟DOM的区别

看两段简单的代码，也许会更容易理解：

这是一段真实DOM的代码：

这是一段虚拟DOM的伪代码：

DOM Diff

换句话说：

总结

vue中虚拟dom和diff算法相关推荐

最新文章

热门文章