Vue_005_虚拟DOM与key的作用

最新推荐文章于 2024-03-29 21:30:57 发布
最新推荐文章于 2024-03-29 21:30:57 发布
阅读量162 收藏
点赞数
分类专栏： Vue 文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_41051457/article/details/106692705
版权

JQuery

  • 提供了对DOM操作的API，简化操作，易于绑定事件，通过事件操作DOM
  • 问题
    在这里插入图片描述
  • Vue和React的改善：引入数据中间层（虚拟DOM）
    通过事件改变数据，数据映射到真实的DOM，并不直接操作DOM
    在这里插入图片描述

虚拟DOM

结构

虚拟DOM

树操作机制

  • 树的操作机制立足于树的对比机制：只比对同层节点，确定改变的节点

移动

移动C节点
在这里插入图片描述

删除新建（同层对比实现跨层移动）

删除C节点（随之删除E、F），第三层新增C节点，新建E、F
在这里插入图片描述

删除新建

删除C节点（E、F节点随之删除），新建G节点，新建E、F节点
在这里插入图片描述

更新删除新建（无key）

B1更新为B2，B2更新为B1，B2下新建E、F，删除E、F
为更好处理这种情况，引入了key属性，变为节点的移动
在这里插入图片描述

移动（有key）

移动（有key）

插入（有key）

插入B4
在这里插入图片描述

编程农民工
关注
专栏目录
26.Vue列表渲染中key的作用与原理（内含虚拟DOM的对比算法详解）
爱米酱的博客
07-08 631
25.Vue列表渲染_爱米酱的博客-CSDN博客这一节开始我们来学一下Vue中与列表渲染相关的东西，这部分知识很重要，而且还比较多，所以我就拆成几个小节来讲。那么这一小节我们就先讲讲基本列表，把基本列表讲清楚之后，我们再讲key的原理，列表过滤和列表排序实现效果：讲到这里这个遍历就已经实现了，但是这里还有一个特别重要的属性，就是key，我们这里不详谈这个属性，这一节我们只关注怎么配置这个属性即可，具体的深入分析内容会在下一节呈现。和key相关的内容我们可以在Vue官网的学习-->API中找到。 这个key属
vue xunidom_vue核心之虚拟DOM(vdom)
weixin_30451613的博客
12-24 100
一、真实DOM和其解析流程？浏览器渲染引擎工作流程都差不多，大致分为5步，创建DOM树——创建StyleRules——创建Render树——布局Layout——绘制Painting第一步，用HTML分析器，分析HTML元素，构建一颗DOM树(标记化和树构建)。第二步，用CSS分析器，分析CSS文件和元素上的inline样式，生成页面的样式表。第三步，将DOM树和样式表，关联起来，构建一颗Rende...
虚拟dom中，key的作用
李文涛的博客
08-12 1234
无论是vue或者react，但我们遍历数组生成dom元素的时候，都会建议我们给每一个dom元素加上key值，而且key值最好用每一项的唯一id，而不用index值，这是为什么呢？ key的作用 key值的作用，其实是：追踪列表中哪些元素被添加、被修改、被移除的辅助标志。 通俗点来说，就是他可以帮助我们快速对比两个虚拟dom对象，找到虚拟dom对象被修改的元素，然后仅仅替换掉被修改的元素，然后再生成新的真实dom。 原理讲解 一：如果没有key值，就会根据就地复用的原则，一个一个对比，然后修改渲染 二：如果k
vue虚拟dom
m0_62351775的博客
01-27 360
概念 通过js创建一个Object对象来模拟真实DOM结构，这个对象包含标签名 (tag)、属性 (attrs) 和子元素对象 (children) 三个属性，通过vue中的render()函数把虚拟dom编译成真实dom，在通过appendChild()添加到页面中 虚拟dom可以简单的用一句话概括， 就是用普通的js对象来描述DOM结构，因为不是真实DOM，所以称之为虚拟DOM 创建真实DOM成本比较高，如果用 js对象来描述一个dom节点， 成本比较低，另外我们在频繁操作dom是一种比较大的开销
Vue中的虚拟dom
田兴的博客
08-10 7369
我又来了，这是Vue面试的最后一招，当然也是极其简单了，先说Virtual Dom，来一句概念： 用js来模拟DOM中的节点。传说中的虚拟DOM。 再来一张图： 　　 是不是一下子秒懂 没懂再来一张 　Virtual Dom就先这样，理解了就OK，下面我们了解一下Diff，老规矩先来一句概念： diff算法就是进行虚拟节点对比，并返回一个patch对象，用来存储两个节点不同的地方，最后用patch记录的消息去局部更新Dom。 换句人话 diff的过程就是调用名为patch的函数，比较新旧节点
虚拟 DOM 中 Key 的作用和好处
gongye2019的博客
05-18 430
在前端快速发展的今天，如果不能时刻保持学习就会很快被淘汰。分享一下 Vue 虚拟 DOM 中 Key 的作用和好处。每天进步一点点。 1、 使用key可以最大程度的重用DOM，减少DOM操作； 2、 在具有相同父节点的时候，使用key可以避免渲染错误，最常见的用例是结合 v-for； 3、 用于强制替换元素/组件而不是重复使用它，比如给span标签设置key，当文本内容改变， 总是会被替换而不是被修改，因此会触发过渡。 在调用 patchVnode 进行新旧节点对比时，如果新旧节点都存在子节点，则调用 up
虚拟DOM中key的作用
qq_61153907的博客
10-28 318
key是虚拟DOM的标识，如果数据发生变化时，Vue会根据【新数据】生成新虚拟DOM,和【旧虚拟DOM】的差异对比，如果旧虚拟DOM和新虚拟DOM的key值相同，并且虚拟DOM内容没有变，就直接使用原来的真实DOM;如果虚拟DOM中的内容变了，就会生成新的真实DOM，然后替换掉之前的真实DOM。如果旧虚拟DOM通过对比算法没有找到和新虚拟DOM相同的key，就会创建新的真实DOM渲染到页面。
Vue系列 =>虚拟Dom和key属性的作用
余光的博客
07-19 1520
在我刚接触前端的时候，在我还没有接触框架的时候，操作DOM最多的就是通过JQ来完成，它帮助我们减少了代码量、在逻辑不变的情况下减少了出错的可能性。但是jQ并没有在根本上解决Dom对性能的影响，或者说只要操作DOM，就一定会对性能造成影响，只不过有些影响我们可以承受，而这也催生出了Vue和React等框架，数据操作Dom。 ...
vue_vue_
09-29
5. **利用缓存策略**：对于大列表，使用`v-for`指令时，可以结合`v-if`和`key`属性，配合虚拟DOM，实现高效的列表渲染。 6. **减少不必要的watcher**：watcher是Vue中监听数据变化的重要机制，但过多的watcher会...
从虚拟dom知识无痛深入vue与react的原理
最新发布
didadidadidadida的博客
03-29 1513
我们都知道像vue、react都有用到虚拟dom,那么虚拟dom到底是什么？框架为什么不直接操作真实dom而要在中间要引入虚拟dom呢？vue和react的虚拟dom又有什么异同呢？我们就从虚拟dom开始讲起，再来逐步引入讲解vue与react的部分原理及其异同，这里会顺便讲解到数据驱动视图及视图驱动数据，顺便明白MVVM、MVC这两种模式，顺便引入相关的八股文知识点，不小心一下子就明白了一大堆知识。
虚拟dom中key的作用
m0_69335214的博客
03-11 420
key是虚拟dom中对象的标识，当数据发生改变时，Vue会根据 新数据 生成 新的虚拟dom，随后Vue进行新虚拟dom 与 旧的虚拟dom 的差异比较，比较规格如下。
虚拟DOM（vue、react）中key的作用
weixin_44682587的博客
10-25 399
虚拟DOM中key的作用: （1) 简单的说: key 是虚拟 DOM 对象的标识，在更新显示时key起着极其重要的作用。 （2) 详细的说:当状态中的数据发生变化时，react 会根据【新数据】生成【新的虚拟DON】 , 随后React进行【新虚拟 DOM 】与【旧虚拟 DOM 】的 diff 比较，比较规则如下： a.旧虚拟 DOM 中找到了与新虚拟 DOM 相同的 key: (1).若虚拟 DOM 中内容没变，直接使用之前的真实 DOM (2).若虚拟 DOM 中内容变了，则生成新的真实..
虚拟DOM _key作用
m0_68331234的博客
05-16 357
虚拟DOM .vue文件中的template里写的标签, 都是模板, 都要被vue处理成虚拟DOM对象, 在生成真实DOM片段, 才会渲染显示到真实DOM页面上 虚拟DOM是:本质就是一个JS对象, 保存DOM关键信息 虚拟DOM的好处:提高DOM更新的性能, 不频繁操作真实DOM, 在内存中找到变化部分, 更新真实DOM(打补丁) _key作用: 子元素或者内容改变会 无key, 就地更新, 有key按照key比较 key值要求是:唯一不重复的字符串或者数值 key应该怎么用: 有id用id
react虚拟DOM中key的作用
weixin_38222276的博客
04-14 194
1. 虚拟DOM中key的作用： 1.简单的说：key是虚拟DOM对象的标识，在更新显示时key起着极其重要的作用。 2.详细的说：当状态中的数据发生变化时，react会根据【新数据】生成【新的虚拟DOM】 随后React进行【新虚拟DOM】与【旧虚拟DOM】的diff比较，比较规则如下： a. 就虚拟DOM中找到了与新虚拟DOM相同 的key： 1.若虚拟DOM中的内容没变，直接使用之前的真实DOM .
虚拟DOM中的key
Mr-yang的随笔
08-03 512
一、react/vue中的key有什么作用？（key的内部原理是什么？） 虚拟DOM中key的作用： 简单的说: key是虚拟DOM对象的标识, 在更新显示时key起着极其重要的作用。 详细的说: 当状态中的数据发生变化时，react会根据【新数据】生成【新的虚拟DOM】, 随后React进行【新虚拟DOM】与【旧虚拟DOM】的diff比较，比较规则如下： a.旧虚拟DOM中找到了与新虚拟DOM相同的key： (1).若虚拟DOM中内容没变, 直接使用之前的真实DOM (2).若虚拟DOM中内容变了
再说一下虚拟Dom以及key属性的作用
LuckXinXin的博客
11-09 243
由于在浏览器中操作DOM是很昂贵的。频繁的操作DOM，会产生一定的性能问题。这就是虚拟Dom的产生原因 Virtual DOM本质就是用一个原生的JS对象去描述一个DOM节点。是对真实DOM的一层抽象 VirtualDOM映射到真实DOM要经历VNode的create、diff、patch等阶段 key的作用是尽可能的复用 DOM 元素 新旧 children 中的节点只有顺序是不同的时候，最佳的操作应该是通过移动元素的位置来达到更新的目的 需要在新旧 children 的节点中保存映射关系，以便能够.
理解虚拟DOM以及key的作用
Hiroshi's
04-06 174
频繁操作DOM性能损耗大，所以就有了虚拟DOM的说法
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值