v-for中的key值-diff算法

最新推荐文章于 2024-06-06 19:37:36 发布
最新推荐文章于 2024-06-06 19:37:36 发布
阅读量211 收藏
点赞数
分类专栏： Vue
原文链接：https://juejin.cn/post/7099817250554642462
版权

Vue diff算法 虚拟DOM 性能优化 key值
关键词由CSDN通过智能技术生成

转载：diff算法 - v-for中的key值作用 - 掘金

diff算法

diff算法就是用JavaScript来表示一个dom树的结构，然后用这个dom去构建一个真实的dom插入到文档中，当状态变更的时候，重新构造一个dom树，比较新旧dom树，记录两个dom树的差异，然后更新差异部分。

虚拟dom

.vue文件中的template里写的标签, 都是模板, 都要被vue处理成虚拟DOM对象, 才会渲染显示到真实DOM页面上

 虚拟dom只有主要的几个属性,速度更快

以后vue数据更新

  • 生成新的虚拟DOM结构
  • 和旧的虚拟DOM结构对比
  • 利用diff算法, 找不不同, 只更新变化的部分(重绘/回流)到页面 - 也叫打补丁

好处1: 提高了更新DOM的性能(不用把页面全删除重新渲染)

好处2: 虚拟DOM只包含必要的属性(没有真实DOM上百个属性)

总结: 虚拟DOM保存在内存中, 只记录dom关键信息, 配合diff算法提高DOM更新的性能

 diff算法的新旧对比

情况1: 根元素变了, 删除重建

情况2: 根元素没变, 属性改变, 元素复用, 更新属性

diff算法-key

根元素没变, 子元素没变, 元素内容改变

1. 无key - 就地更新

v-for不会移动DOM, 而是尝试复用, 就地更新，如果需要v-for移动DOM, 你需要用特殊 attribute key 来提供一个排序提示

2. 有key-key为索引 

还是就地更新，因为新旧虚拟DOM对比, key存在就复用此标签更新内容, 如果不存在就直接建立一个新的

3. 有key-key为id

key的值只能是唯一不重复的, 字符串或数值。v-for不会移动DOM, 而是尝试复用, 就地更新，如果需要v-for移动DOM, 你需要用特殊 attribute key 来提供一个排序提示

总结:

vue是如何提高更新性能的?

  • 采用虚拟DOM+diff算法提高更新性能

虚拟DOM是什么?

  • 本质是保存dom关键信息的JS对象

diff算法如何比较新旧虚拟DOM?

  • 根元素改变 – 删除当前DOM树重新建
  • 根元素未变, 属性改变 – 更新属性
  • 根元素未变, 子元素/内容改变 - 更新内容
  • 无key – 就地更新 / 有key – 按key比较
在线小白www
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
浅谈VUE中演示v-for为什么要加key
10-15
本文将深入探讨在Vue中使用`v-for`时为何需要添加`key`以及它的工作原理。 首先，让我们通过一个示例来了解问题。在不使用`key`的情况下，当动态向列表中添加元素时，可能会出现预期之外的行为。例如，如果选中了一...
根据尚硅谷老师天禹的Vue课程，自制v-for中key原理动画PPT，敬请参考
03-23
在尚硅谷张天禹老师的Vue课程中，他通过PPT动画深入浅出地解释了`v-for`中`key`属性的底层原理。 `v-for`指令的基本语法是这样的： ```html <template v-for="item in items"> <!-- 在这里，item是当前遍历到的...
经典vue难点----v-for中的key和diff算法
沉默的鑫的博客
10-08 651
引言 今天学习了v-for中的key和diff算法之间的关系，了解了vue是如何高效的渲染DOM。 v-for中的key 官方的解释 key属性主要用在Vue的虚拟DOM算法，在新旧nodes对比时辨识VNodes 如果不使用key，Vue会使用一种最大限度减少动态元素并且尽可能的尝试就地修改/复用相同类型元素的算法 而使用key时，它会基于key的变化重新排列元素顺序，并且会移除/销毁key不存在的元素； 好难理解！！！！直接上案例 案例 在[a,b,c,d]中插入f，有三种方法： 数组变了，重
vue中v-for中的key的作用以及diff算法
weixin_54217534的博客
07-05 687
由下图我们可以看到,diff算法就是当数据被修改时，直接在虚拟dom中进行对比，若发现有一致的，则保持原来页面真实dom不变，只渲染新修改的数据作用:若数据直接就渲染成了真实dom，则每次数据的修改，都会引起dom的重新渲染，(例如:在下图中的数据，第一次有两个人渲染到页面，而第二次增加了一个人，若没有虚拟dom，则第二次渲染还是需要在把前两个也重新渲染一次，这样就造成了浪费，若存在虚拟dom，则第二次渲染时，数据则会跟虚拟dom的数据进行对比，发现前两个人是一致的，则会把前面渲染的真实dom直接拿过来，只
【前端每日基础】day38——v-for 的 diff 算法的原理
最新发布
modaoshi51991的博客
06-06 446
键值（key）优化：通过为每个节点设置唯一的 key，Vue 可以更高效地跟踪每个节点的变化，直接复用、移动、删除或添加节点，而不是逐个节点比较。比较旧的开始节点和新的结束节点：如果相同，说明新节点移动到了列表的末尾，需要进行 DOM 操作将旧节点移动到末尾，并移动指针。比较旧的结束节点和新的开始节点：如果相同，说明新节点移动到了列表的开头，需要进行 DOM 操作将旧节点移动到开头，并移动指针。比较新旧节点列表的开始节点：如果相同，则更新节点并移动 oldStartIdx 和 newStartIdx。
笔记——聊一聊vue的v-for中key的作用（diff算法）
蜡笔不新的博客
10-30 162
例如：随着编程技术的不断发展，VUE学习这门技术也越来越重要，很多公司对vue的基础要求很高，本文就介绍了v-for的基础内容。提示：以下是本篇文章正文内容key的作用主要是为了高效的更新虚拟DOM。另外vue中在使用相同标签名元素的过渡切换时，也会使用到key属性，其目的也是为了让vue可以区分它们，否则vue只会替换其内部属性而不会触发过渡效果。
vue diff算法 v-for中key的作用
greed
08-06 649
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
vue v-for 需要 key 实例讲解 原理 diff算法
KEEP RUNNING的博客
08-03 1382
有无key的差异 1、without key 当选中 notice 1 时，input添加一个新值(notice 3)后选中是notice 3，并不是我们想要的结果，我们想要的是当添加 notice 3 后，选中的依然是 notice 1 2、with key 加了 key 之后，是理想效果 原理 在我们进行添加数据后，vue 内部时通过 Diff 算法对虚拟 DOM 进行更新，从而进行页面数据更新渲染。 （1）diff算法原理-BC之间插入一个F节点： （2）...
用v-for来解释diff的算法原理 及 diff算法与虚拟dom的关系解释
吃瓜群众的博客
05-13 880
我的理解： diff算法：从上往下逐层进行比较，给每个节点生成标识符用在同级进行对比，：如果标识符相同，则继续比较此节点的下一级，如果子节点都相同则复用；如果子级有不同，则对此子节点进行判断， 节点中如果出现了新的标识符，则新增；如果旧节点的标识符在新中没有出现，则删除；如果标识符相同，内容不同，则进行替换
vue中使用v-for时为什么不能用index作为key
11-21
在Vue和React等现代前端框架中，`v-for`（Vue）或`map`（React）等指令用于遍历数组并动态渲染列表。在使用这些指令时，为列表项提供`key`属性是非常重要的，因为它对虚拟DOM的Diff算法有着直接影响。然而，使用索引...
详解为什么Vue中不要用index作为key(diff算法)
11-20
Vue 中的 key 是用来做什么的？为什么不推荐使用 index 作为 key？常常听说这样的问题，本篇文章带你从原理来一探究竟。 另外本文的结论对于性能的毁灭是针对列表子元素顺序会交换、或者子元素被删除的特殊情况，...
关于v-for中key的理解 diff算法的不好
qq_45645051的博客
12-04 210
v-for循环key的作用（用v-for来解释diff的算法原理 及 diff算法与虚拟dom的关系解释） diff算法： 从上往下逐层进行比较，给每个节点生成标识符用在同级进行对比，：如果标识符相同，则继续比较此节点的下一级，如果子节点都相同则复用；如果子级有不同，则对此子节点进行判断， 节点中如果出现了新的标识符，则新增；如果旧节点的标识符在新中没有出现，则删除；如果标识符相同，内容不同，则进...
v-for 中 key 的作用
weixin_45832482的博客
07-15 519
v-for中key的作用：给要循环的元素绑定一个唯一的身份标识。
详解 Diff 算法以及循环要加 key 值问题
dficvkt1178的博客
08-03 340
上一篇文章我简述了什么是 Virtual DOM，这一章我会详细讲 Diff 算法以及为什么在 React 和 Vue 中循环都需要 key 值。 什么是 DOM Diff 算法 Web 界面其实就是一个 DOM 树的结构，当其中某个部分发生变化的时候，实质上就是对应的某个 DOM 节点发生了变化。而在 React/Vue 中，都采用了 Virtual DOM 来模拟真实的树结构，他们都...
v-for列表渲染有无key值对比-diff算法详解
weixin_49172439的博客
08-14 1059
在使用v-for进行列表渲染时，我们通常会给元素或者组件绑定一个key属性。那么这个key属性有什么作用呢？
vue系列：v-for中key的作用（原理：diff算法）
分享前端开发工程师的一些日常生活、前端知识点、职业发展、对一些问题的看法、感悟等等
08-13 4292
当 Vue.js 用v-for正在更新已渲染过的元素列表时，它默认用“就地复用”策略。如果数据项的顺序被改变，Vue 将不会移动 DOM 元素来匹配数据项的顺序， 而是简单复用此处每个元素，并且确保它在特定索引下显示已被渲染过的每个元素。 放几个文章吧，实在不想写了-_- key的作用1 key的作用2 diff算法1 diff算法2 ...
详解v-for中:key属性的作用
Dax1_的博客
02-26 7740
举个栗子 不设置key <div id="app"> <div> <input type="text" v-model="name"> <button @click="add">添加</button> </div> <ul> <li v-for="(item, i) in list"> <input type="checkbox"
【Vue】 使用v-for，对key需要注意什么？
DomCode
05-24 682
v-for 中使用 key 使用 v-for 更新已渲染的元素列表时，默认用就地复用策略；列表数据修改的时候，他会根据 key 值去判断某个值是否修改，如果修改，则重新渲染这一项，否则复用之前的元素； 使用key的注意事项： 不要使用可能重复的或者可能变化 key 值（控制台也会给出提醒）如果数组中的数据有状态需要维持时（例如输入框），不要使用数组的 index 作为 key 值，因为如果在数组中插入或者移除一个元素时，其后面的元素 index 将会变化，这回让vue进行原地复用时错误的绑定状态。 如果数组
v-for的key值为什么不建议使用数组下标
03-29
而v-for指令中的key值可以帮助Vue精准的找到需要更新的元素，提高性能。如果使用数组下标作为key值，当数组中的元素位置变化时，key值也会跟着变化，这样可能会导致不必要的DOM更新，降低性能。 2. 数组下标并不是...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值