vue中的虚拟DOM 和diff算法

最新推荐文章于 2023-03-03 16:36:32 发布
最新推荐文章于 2023-03-03 16:36:32 发布
阅读量219 收藏 2
点赞数
文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_56263402/article/details/117822393
版权

提到虚拟DOM就需要提一下vue的就地复用策略

vue的就地复用策略：就是尽可能的进行（同级别，同位置），对比虚拟dom进行对比，复用旧Dom结构，进行差异化更新

虚拟Dom就是一个个描述真实dom结构的对象，为什么进行虚拟dom对比，因为真实的dom，比较复杂，拥有大量的无关属性，比较起来比较费时间和性能，所以利用虚拟dom进行对比，但是就算是虚拟的dom结构直接比也很麻烦，所以，vue中就提供了diff算法：

算法比较的规则

1.先比较根级元素，如果虚拟的dom元素不同，就直接删除旧dom节点，创建新新节点

2.比较同级，在没有设置key属性的情况下，自动按下标进行差异性比较，然后更新渲染；在设置了key值的情况下，按相同key值进行比较，这样可以提高虚拟dom对比的效率，进而提高渲染性能

注意点：这个key 必须是数子或者字符串，还必须是唯一的，如果有id就用id，没有用name也行，最后再考虑用index

=============================  术语   ==============================&#

最低0.47元/天 解锁文章
多啦爱梦的梦想
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vue中的diff算法详解
weixin_47450807的博客
01-16 889
diff算法是面试中常常问到的问题，下面的文章包含diff算法解析，以及内部源码解析 一、两种情况 不存在key的情况 存在key的情况 二、不使用key 解析:上面的是不存在key的diff算法，会直接进行比对，分三种情况, 第一种情况是：两个节点数目一致，则直接进行patch即可。 第二种情况是：newNodes的数目要多于oldNodes的数目，则会执行挂载（mount）操作。 第三种情况是：newNodes的数目少于oldNodes的数目，则会执行卸载（unmount）的操作。 下面是相关源码
vue虚拟dom树的diff算法
小易不止于搬砖的博客
07-31 415
diff算法过程 在数据更新的时候发生diff，因为数据更新会运行render函数得到虚拟dom树，最后页面重新渲染。当组件创建的时候，组件所依赖的属性或者数据变化时，会运行一个函数进行以下操作： 运行render生成一颗新的虚拟dom树 运行updata，传入render生成的虚拟dom树的根节点，对新旧两棵树进行对比，最终完成对真实dom的更新 过程描述 当组件创建和更新时，vue会执行内部的update函数，该函数使用render函数生成的虚拟dom树，将新旧两树进行对比，找到差异点，最终更新到真实d
vue 虚拟dom原理、diff算法和key作用
a576837179的博客
03-03 395
vue 虚拟dom原理、diff算法和key作用
虚拟DOM 和DOM diff算法
zzy的博客
08-26 148
DOM diff DIFF算法在执行时有三个维度，分别是Tree DIFF、Component DIFF和Element DIFF，执行时按顺序依次执行，它们的差异仅仅因为DIFF粒度不同、执行先后顺序不同。 Tree DIFF：是对树的每一层进行遍历，如果某组件不存在了，则会直接销毁 Component DIFF：第二层进入Component DIFF，同一类型组件继续比较下去，发现A组件没有，所以直接删掉A、B、C组件；继续第三层，重新创建A、B、C组件。 Element DIFF紧接着以上统一类型组
diff算法
m0_54581080的博客
07-29 245
diff的话就是比较两颗树
一篇文章带你搞懂Vue虚拟Dom与diff算法
10-14
主要给大家介绍了关于Vue虚拟Dom与diff算法的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
vue-dom-diff:vue 虚拟dom diff算法实现
05-05
Vue中的虚拟DOM Diff算法是其性能优化的关键部分，它使得UI的更新更加高效，避免了不必要的DOM操作。现在我们来深入探讨这个话题。 首先，虚拟DOM是一种抽象层，它模拟了真实DOM的结构，但使用的是JavaScript对象，...
详解vue的diff算法原理
08-27
Vue的diff算法原理详解 在本文中，我们将详细介绍 Vue 的 diff 算法原理，diff 算法是 Vue 框架中的一种关键技术，用于高效地更新虚拟 DOM 和真实 DOM。本文将从以下几个方面来介绍 diff 算法的原理： 1. 何时更新...
虚拟dom && diff算法
01-08
- 在Vue中，当数据发生变化时，Vue会自动重新计算虚拟DOM树，并使用Diff算法找到最小更新路径。这使得Vue能够高效地更新视图，同时避免不必要的DOM操作。 5. **性能优化** - 虚拟DOM的惰性原则：只有在实际需要的...
【Vue学习】Vue原理—虚拟DOM和diff算法
zx1041561837的博客
03-02 1158
本文介绍了Vue原理中的虚拟DOM和diff算法。通过snabbdom虚拟DOM库，对diff算法的执行流程和源码进行了简单介绍。
虚拟 dom
lk19910323的博客
04-26 288
虚拟 dom 是利用 js 描述元素与元素的关系，用 js 对象来表示真实的 DOM 树结构，创建一个虚拟 DOM 对象 由于在浏览器中操作 DOM 是很昂贵的。频繁的操作 DOM，会产⽣⼀定的性能问题. 在组件渲染的时候会调用 render 函数，这个函数会生成一个虚拟 dom，再根据这个虚拟 dom 生成真实的 dom，然后这个真实的 dom 会挂载到我们的页面中。 如果只是渲染一个页面后期不改动的话 那么虚拟 dom 其实成本更高 因为 都要渲染成真实的 dom 如果组件内有响应的数据，数据发生改变的
Vue2.0 和 Vue3.0 Dom Diff 对比
cxz
10-13 1347
diff算法的目的是为了找到哪些节点发生了变化，哪些节点没有发生变化可以复用。如果用最传统的diff算法，如下图所示，每个节点都要遍历另一棵树上的所有节点做比较，这就是o(n^2) 的复杂度，加上更新节点时的o(n)复杂度，那就总共达到了O(n^3)的复杂度，这对于一个结构复杂节点数众多的页面，成本是非常大的。实际上vue和react都对虚拟dom的diff算法做了一定的优化，将复杂度降低到了o(n)级别，具体的策略是：同层的节点才相互比较从根节点起遍历整个节点数，只对同层的节点进行相互比较。
vue中Diff算法、key的作用原理
情非得已小猿猿
05-21 5447
1、Diff算法步骤： 用js对象结构（虚拟DOM）表示 DOM 树的结构；然后用这个树构建一个真正的 DOM 树，插到文档当中 当状态变更的时候，重新构造一棵新的对象树。然后用新的树和旧的树进行比较，记录两棵树差异 把所记录的差异应用到所构建的真正的DOM树上，视图就更新了 Diff 算法： 仅在同级的vnode间做diff，递归地进行同级vnode的diff，最终实现整个DOM树的更新 2、key的作用原理： 唯一标识，为了高效的更新虚拟DOM transition过渡时，使用key属性，可以
v-for列表渲染有无key值对比-diff算法详解
weixin_49172439的博客
08-14 1029
在使用v-for进行列表渲染时，我们通常会给元素或者组件绑定一个key属性。那么这个key属性有什么作用呢？
Vue的“就地更新”策略
dpp10683401的博客
04-16 1425
什么是“就地更新” 官方文档给的解释： v-for 渲染列表时，如果列表数据发生了变化，Vue 会使用一种最大限度减少动态元素并且尽可能的尝试就地修改/复用相同类型元素的算法。也就是说默认的情况下Vue会尽量使用已经存在的DOM元素，直接在已有的DOM上进行复用修改，这样可以带来一定性能上的提升。 // DOM <div id="app"> <ul> <li v-for="(item,index) in list" :clas
vue diff算法 v-for中key的作用
greed
08-06 646
vue diff算法 v-for中key的作用 react vue中key有什么作用(key的内部原理) 虚拟DOM中key的作用 key是虚拟DOM对象的标识 当状态中的数据发生改变时,Vue会根据新数据生成新的虚拟DOM,随后Vue进行新虚拟DOM和旧虚拟DOM的差异比较 对比规则 旧虚拟DOM中找到了与新虚拟DOM相同的key: 若虚拟DOM中内容没有变 直接使用之前的真实DOM 若虚拟DOM中内容变了 则生成新的真实DOM 随后替换掉页面中之前的真实DOM 旧虚拟DOM中未找到与新虚拟D
虚拟dom 和 diff算法
小海的博客
10-26 288
虚拟dom .vue文件中的template里写的标签, 都是模板, 都要被vue处理后成虚拟DOM对象, 才会渲染显示到真实DOM页面上 1.内存中生成一样的虚拟DOM结构(本质是个JS对象=) 因为真实的DOM属性好几百个, 没办法快速的知道哪个属性改变了 比如template里标签结构 <div id="box"> <p class="my_p">123</p> </div> 对应的虚拟DOM结构 const dom = {
diff算法浅析
zw_wen的博客
02-18 678
本文主要对最近学习的diff算法做个总结，会对node节点存在key时的diff算法和节点key不存在时的diff算法进行浅析，节点key存在时的最大索引法，双端比较法，最长递增子序列法进行逐一学习；会结合部分源码函数进行代码分析和执行分析； 1. 节点没有key值时所采用的算法；Vue3中在节点没有key的情况下采用的算法； 1.1 遍历新旧节点数组中长度较小的节点数组，应用patch函数进行更新； 1.2 对比新旧节点数组的长度，如果newNodeChild.length > oldNode.
Vue原理-diff比对算法
火腿肠的博客
12-18 744
diff比对算法 源码版 https://blog.csdn.net/s2422617864/article/details/119855400 原理版 首先： h函数用于生成虚拟节点，path比对新老虚拟节点之后替换真实dom树 path算法替换新老节点 没有key暴力删除 有key按照key判断然后调整顺序（如果节点为同一节点致） 且path比对算法只能同层比较不能跨层比较 手写diff算法 整体代码 就是单纯将js转换为一个虚拟dom对象的形式（包含类型、内容、子节点、key等） createEl
vue的虚拟dom和diff算法
最新发布
07-27
- *2* [vue中虚拟dom和diff算法](https://blog.csdn.net/weixin_54003465/article/details/130819020)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值