Vnode-Vdom-diff算法

最新推荐文章于 2025-03-15 10:43:56 发布
最新推荐文章于 2025-03-15 10:43:56 发布
阅读量905 收藏 5
点赞数 2
CC 4.0 BY-SA版权
分类专栏： Vue学习笔记 文章标签： 算法 vue.js javascript diff 虚拟DOM
彭先生版权所有，未经授权是非法行为。欢迎访问我的个人网站：www.bookbook.cc
本文链接：https://blog.csdn.net/weixin_43742708/article/details/120114027
本文深入探讨了Vue中的关键概念——虚拟节点（VNode）及其在构建虚拟DOM树中的角色。虚拟DOM是一种优化更新实际DOM的方法，通过Diff算法高效地比较新旧VNode树，实现最小化DOM操作。文章详细阐述了无Key和有Key的Diff算法步骤，揭示了Vue如何响应式地插入、更新和删除元素，确保高效性能。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

文章目录

一、什么是 vnode?

VNode的全称是Virtual Node，也就是虚拟节点(一个节点)
事实上，无论是组件还是元素，它们最终在Vue中表示出来的都是一个个VNode
VNode的本质是一个JavaScript的对象;

<div class="title" style="font-size:30px;color:res">哈哈哈</div>

在这里插入图片描述

二、什么是虚拟DOM?

Virutal dom 多个Vnode形成的树结构。
如果我们不只是一个简单的div，而是有一大堆的元素，那么它们应该会形成一个VNode Tree：
在这里插入图片描述
在这里插入图片描述

三、什么是diff算法及作用？

举例说明：
有一个数组arr渲染到页面上，arr:
['a', 'b', 'c', 'd']
现在我们在c的前面插入一个字母f,即：arr.splice(2,0,'f')
不出意外页面上会多出一个f

那么问题来了，vue是响应式的，它内部是怎么把f给插入到以前的数组内的呢？

在生成新的数据：Vue内部把新生成的 Vnodes 和旧的 Vnodes对比的这个过程就是 diff算法。
在这里插入图片描述

3.1 源码中for循环时没Key的做法

在这里插入图片描述

3.2 有key的diff算法如下（一)

在这里插入图片描述

3.3 有key的diff算法如下（二）

在这里插入图片描述

3.4 有key的diff算法如下（三)

在这里插入图片描述

关于cassandra vnode的理解-marsyoung.
马志宇的专栏
07-29 2587
上面的图中，是没有虚拟节点的，下面的图中，是有虚拟节点的。 图一中的A,B,C,D,E,F每个字母可以理解为一个数据集合，node 1,node2 等等则代表节点。 数据是如何放入这些node的呢，每个数据有对应的partition key，根据这个key值会计算出一个token，多个key值根据hash算法得到的token是同一个，假设这个Key值的集合是A，那么用node 1来对应这个to
Vue 中的 diff 算法
最新发布
yousuotu的博客
03-25 1206
第三次循环中，发现E没有找到，这时候只能直接创建新的真实节点 E，插入到第二次创建的 C 节点之后。之间的所有节点，也就是节点F，直接创建 F 节点对应的真实节点放到 B 节点后面。后创建了 A 的真实节点，插入到前一次创建的 E 节点后面。后创建了 C 的真实节点插入到第一次创建的 D 节点后面。后创建了 B 真实节点 插入到前一次创建的 A 节点后面。第二次循环后，同样是旧节点的末尾和新节点的开头(都是 C)相同，同理，第一次循环后，发现旧节点D与新节点D相同，直接复用旧节点D作为。
什么是VNode
热门推荐
qq_42005992的博客
11-25 1万+
什么是VNode 在vue.js中存在一个VNode类，使用它可以实例化不同类型的vnode实例，而不同类型的vnode实例各自表示不同类型的DOM元素。 例如，DOM元素有元素节点，文本节点，注释节点等，vnode实例也会对应着有元素节点和文本节点和注释节点。 VNode类代码如下： export default class VNode { constructor(tag, data, children, text, elm, context, componentOptions, asyncFac
VNode是什么？
zayyo的博客
06-26 1431
VNode的全称是Virtual Node,也就是虚拟节点.它是指一个抽象的节点对象，用于描述真实DOM中的元素。在前端框架中，通过操作VNode来实现虚拟DOM，从而提高性能。
VNode
2301_80484340的博客
03-10 437
它将真实的DOM抽象成JavaScript对象，进行操作后再将差异更新到真实的DOM上，从而避免了频繁的重排和重绘，提高了Web应用的性能和可维护性。
13-文本小节-dom转vdom.md
03-31
虚拟DOM的引入可以作为一个中间层，通过diff算法比较前后虚拟DOM树的差异，再将差异批量更新到真实DOM上，这样大大减少了不必要的DOM操作，从而提高应用的性能。 6. vDOM与JS对象的表示 在虚拟DOM中，每个DOM节点都...
diff算法，递归-M
Sunshinedada的博客
05-21 428
diff算法是一种通过同层的树节点进行比较的高效算法。diff算法的目的就是找出新旧不同虚拟DOM之间的差异,使最小化的更新视图，所以 diff 算法本质上就是比较两个js对象的差异。特点：diff整体策略为：深度优先，同层比较。
vue的diff算法知识点总结
01-19
diff算法首先要明确一个概念就是diff的对象是虚拟dom，更新真实dom则是diff算法的结果 Vnode基类 constructor ( 。。。 ) { this.tag = tag this.data = data this.children = children this.text = text ...
Vue.js diff算法详解与Vnode解析
"Vue.js 的 diff 算法是用于高效地更新 Vue 组件视图的核心机制，通过对比新旧虚拟 DOM（VNode）来确定最小化的DOM操作。该算法在 Vue 源码的 `src/core/vdom/patch.js` 文件中实现。 虚拟 DOM 在 Vue 中，diff ...
VUE中VNode（虚拟节点）是个啥？
liuruiaaa的博客
03-15 1048
VUE中VNode（虚拟节点）是个啥？
VNode 是什么？ 什么是虚拟 DOM？
qq_60976312的博客
12-28 1584
VNode 是什么？ 什么是虚拟 DOM？
VNode 是什么？优点？什么是虚拟 DOM？diff算法？
m0_71231013的博客
06-20 1060
是什么？ 在vue.js中，Vnode是一个类，可以生成不同类型的vnode实例，而不同类型的vnode表示不同类型的真实DOM元素。VNode的全称是Virtual Node，也就是虚拟节点；事实上，无论是组件还是元素，它们最终在Vue中表示出来的都是一个个VNode。我们可以把vnode理解成JavaScript对象版本的DOM元素。渲染视图的过程是先创建vnode，然后在使用vnode去生成真实的DOM元素，最后插入到页面渲染视图。优点？ 兼容性强，不受执行环境的影响。Vnode 因为是 JS 对象，
VNode简介
Jaden
09-23 1万+
VNode说明&作用 VNode是什么 VNode是JavaScript对象。VNode表示Virtual DOM，用JavaScript对象来描述真实的DOM把DOM标签，属性，内容都变成对象的属性。就像使用JavaScript对象对一种动物进行说明一样{name: 'Hello Kitty', age: 1, children: null}。 VNode的作用 通过render将tem...
VNode 是什么？优点？什么是虚拟 DOM？
kikuk的博客
06-19 1235
VNode 虚拟 DOM
vnode
qq_41268872的博客
07-26 1268
在vue.js中，组件是一个非常重要的概念，整个应用的页面都是通过组件渲染实现的。但你知道当我们编写这些组件时，它内部的工作原理吗？从编写组件开始，到最后的真正的DOM又是怎样的一个转变过程呢？这篇文章会描述Vue3.x中的组件是如何渲染的。......
Vue源码阅读（16）：VNode
f18855666661的博客
08-11 2194
vnode 是虚拟DOM 中一个很重要的知识点，今天带大家了解一下。 1，什么是 VNode 首先说下什么是 VNode，VNode 的本质只是 JavaScript 中普通的对象字面量，只不过这个对象字面量中的属性可以很好的描述网页中的真实DOM，并且可以通过 VNode 创建出对应的真实的DOM 节点。 在源码中，有一个类专门用于实例化vnode对象。 export default class VNode { tag: string | void; data: VNodeData ..
浅析 v-node
Yi_CO_coding的博客
09-01 2456
虚拟DOM、diff算法
66 .VNode 是什么？ 什么是虚拟 DOM？
aichixiangcaia的博客
11-07 738
1） VNode 是什么 VNode 是 JavaScript 对象， VNode 表示 虚拟节点 Virtual DOM，用 JavaScript 对 象来描述真实的 DOM 把 DOM 标签 属性，内容都变成 对象的属性
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

优雅哥cc

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

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

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

打赏作者

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

抵扣说明：

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

余额充值