v-for更新时是如何操作DOM的?

最新推荐文章于 2022-06-15 09:55:16 发布
最新推荐文章于 2022-06-15 09:55:16 发布
阅读量543 收藏 1
点赞数 3
文章标签： javascript 前端 html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_62177959/article/details/122500023
版权

循环出新的虚拟DOM结构, 和旧的虚拟DOM结构对比, 尝试复用标签就地更新内容

1.什么是虚拟DOM ？

虚拟DOM本质是保存节点信息, 属性和内容的一个JS对象

 

2.为什么存储虚拟DOM？

因为真实DOM属性过多遍历耗时

3.虚拟DOM好处？

虚拟DOM的存在就是提高DOM更新的性能, 不用频繁操作真实DOM, 在内存中找到变化部分, 再更新真实DOM。

4.diff算法

浏览器渲染真实DOM的消耗是很大的，当我们修改了某个数据时，如果直接渲染到真实DOM上会引起整个dom树的重绘和重排，导致更新性能很低，用户体验很差，diff算法的过程是根据新旧DOM在内存中比较变化部分, 然后给真实DOM打补丁。

①同级比较根元素变化，整个dom树删除重建

 ②同级比较根元素不变，属性改变更新属性

5.v-for的key属性作用

①无key时最大限度尝试就地修改/复用相同类型元素，就地更新内容

 

②有key且值为索引时，先产生新旧虚拟DOM, 根据key比较, 还是就地更新

有key且值是唯一不重复的字符串或数字，基于key的来比较新旧虚拟DOM, 插入新的key元素或移除key不存在元素，不改变其他元素的内容

 

在使用v-for指令时，key属性值有id用id, 无id用索引，好处是可以配合虚拟DOM提高更新的性能

小结：

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

根元素改变——删除当前DOM树重新建

根元素未变——属性改变——更新属性

根元素未变——子元素/内容改变——无key – 就地更新 / 有key – 按key比较

Kitty680
关注
  • 3
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
踩坑-填坑之 : v-for 遍历数组时,通过操作DOM改变数组,引起新增内容同时变化问题.
ITDSH的博客
11-15 1515
出现了什么问题,什么现象? 在开发的过程中,从后端得到一个数组,前端用v-for展示;展示的过程中需要对展示的内容进行操作,赋值改变,往循环的数组中添加元素.新增加的元素变成了联动(姑且先这么叫),改第二个另外两个新增的也跟着改变. 附图: 为什么会出现联动现象,增加不是用绑定的时候会不会有这种现象? 查了很多资料,具体原因暂时还没有找到. 在已有的数组添加新的元素,改变新添加的元素时,原数组...
v-for更新机制-计算属性-过滤器-侦听器
一条小胖鱼
07-03 521
1.vue基础 1.0 v-for更新监测 数组变更方法，就会导致v-for更新，页面更新 数组非变更方法，返回新数组，就不会导致v-for更新，可采用覆盖数组或者this.$set()来设置 数组方法改变，v-for会监测并更新页面 push() pop() shift() unshift() splice() sort() reverse() 这几个不会触发v-for更新 slice()* filter()* concat() 1.1v-for的原地更新 v-for 的默认行为会尝试原地修改元素而
Vue学习-02
weixin_43386350的博客
03-13 1210
vue基础—更新监测和key 1、v-for 更新监测 目标：目标结构变化，触发v-for 更新 口诀： 数组变更方法，就会导致v-for更新，页面更新 数组非变更方法，返回新数组，就不会导致v-for更新，可采用覆盖数组或this.$set() 会导致v-for更新方法举例： push() pop() shift() unshift() splice() sort() reverse() 1.1、v-for 就地更新 目标： 当数组改变后是如何更新的 总结：v-for 更新时 找出变化的部分然后更新
Vue解决data数据改变时，v-for无法实现实时更新dom元素的问题(template中代码的局部刷新)
weixin_40745445的博客
04-24 7411
问题描述 利用Vue做项目过程中，经常使用v-for渲染多个重复组件或dom元素，比如：传递json/字典，利用v-for遍历json中的key和value，并渲染到页面中，改变元素的顺序，如下所示： <el-card class="content-card" v-for="(questionsData,i) in form.questionsData"> //具体的业务 ...... </el-card> 然而，v-for在设计过程中，无法实现对数据的双向绑定，也就
删除DOM节点
Massimo__JAVA的博客
06-15 756
JavaScript删除DOM节点
v-for如何更新DOM
maqiu233的博客
10-20 415
文章目录v-for基本使用v-for更新检测理解v-for就地更新真实DOM和虚拟DOM理解diff算法 v-for基本使用 使用html举例 <body> <div id="app"> <ul> <li v-for="(a,b) in obj">{{a}}----{{b}}</li> </ul> <ul> <li v-for="(a,b) in arr">{{a}}----{{b}}
vue的注意规范之v-if 与 v-for 一起使用教程
10-16
- 使用 `v-if` 过滤列表可以减少不必要的 DOM 操作，提高应用性能。 - 如果 `v-if` 与 `v-for` 需要在同一个元素上使用，考虑使用 `<template>` 标签包裹 `v-for`，这样 `v-if` 只会控制 `<template>` 是否被编译...
Vue中的v-for指令不起效果的解决方法
10-17
6. 遍历对象时的错误：如果`v-for`正在遍历一个对象而不是数组，语法应为`v-for="(value, key) in object"`。确保你提供了正确的键值对。 7. 模板编译问题：如果使用了自定义模板引擎或字符串模板，可能需要确保Vue...
Vue v-for中的 input 或 select的值发生改变时触发事件操作
10-14
当使用`v-for`与`input`或`select`元素结合时，我们常常需要监听这些表单元素的值变化，以便在值发生变化时执行相应的操作。本文将详细介绍如何在Vue中处理这种情况，并提供相关知识点。 1. **`v-on:input` 事件...
vue使用v-for实现hover点击效果
10-17
在Vue.js中，我们可以利用其强大的数据绑定和事件处理能力来实现复杂的功能，比如在使用`v-for`循环遍历列表时，同时实现鼠标悬停（hover）和点击效果。`v-for`指令用于渲染列表或数组，而`v-on`指令（通常简写为`@`...
vue中使用v-for时为什么不能用index作为key
11-21
尤其是当列表可能进行插入、删除或重新排序操作时，使用唯一的标识符作为`key`能够确保框架有效地更新DOM，提高性能，并避免潜在的状态bug。因此，除非遍历的DOM内容极其简单，否则应尽量避免使用索引作为`key`。
Vue.js：v-for的更新监测，就地更新和虚拟dom说明
qq_58946786的博客
05-10 915
v-for的更新监测，会触发更新的方法和不会触发更新的方法，就地更新和虚拟dom说明
vue 动态添加/删除dom元素
qq_36262395的博客
03-12 9481
需要在点击添加时，增加一行key/value的输入框；点击垃圾桶图标时，删除对应行
vue中获取v-for异步数据dom的完美解决方案
weixin_47327288的博客
03-28 3378
问题描述 每次加载界面时，在 mounted阶段，只能获取普通dom（指静态渲染的dom），获取不到v-for的dom，尽管使用$nextTick也获取不到，虽然使用setTimeOut能解决，但这种方法真的很low，作为程序员要追求完美，下面我们看看怎么完美解决这个问题。 原因 在v-for里的数据是异步获取的，里面的id或者class也都是动态绑定的，而mounted阶段只是实例挂载完成，这时候异步请求的数据大概率还没请求完成，从而v-for要渲染的dom肯定也还没开始渲染，这时候连异步请求的数据都获取
Vue3 v-for生成DOM元素
白瑕 的博客
04-15 2471
v-for的用法, 案例代码可跑.
LongAdder源码分析
Hi，我是sharkchili，CSDN Java领域博客专家，开源项目JavaGuide维护人员，我想写一些有意思的东西，希望对你有帮助。
11-20 1709
JDK1.5开始就提供基本数据类型操作的原子类，通过CAS实现线程安全的数据累加，在高并发场景下，这些原子类会因为竞争的激烈导致大量线程频繁的CAS频繁失败，影响程序执行效率。所以JDK1.8提供了线程安全的计数器LongAdder，它底层是由一个数组进行计数，不同线程会根据哈希算法会得到底层数组的某个索引位置，然后将累加的值通过CAS的方式累加到该索引位置上。因为LongAdder底层的数组最大容量为CPU核心数，所以在高并发场景下的CAS操作成功率远高于JDK1.5的原子类，所以在JDK8。
v-for 循环遍历（点击DOM获取数据）
李特成的博客
07-12 2730
&lt;!DOCTYPE html&gt; &lt;html lang="en" dir="ltr"&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;title&gt;v-for 循环遍历（点击DOM获取数据）&lt;/title&gt; &lt;/head&gt
v-for 复用组件， 动态修改 dom 样式
萝卜芹菜芽
08-02 642
思路： 监听数据变化 ref 写在 v-for 的 dom 上 this.$nextTick : dom 渲染完毕 实例代码：
Vue中使用v-for生成dom删除元素错乱的问题
若晨工作室
01-17 3050
      项目上需要一个条件树的组件，多个条件这里使用一个数组去保存，然后使用v-for循环数组插入dom。       vue组件里使用v-for时很容易忽略了每一项的key值，遇到的问题如果后续需要对数组进行删除操作的情况下，需要加上key值而且要绑定该数组项的唯一标识来标识每一个生成的dom元素，这样就不会导致改动数组数据后dom不重新渲染显示错乱的问题。 &lt;cond-node...
vue3g在v-for里面给dom绑定ref
最新发布
06-03
可以给v-for循环出来的DOM元素绑定ref属性，如下所示： ``` <div v-for="(item, index) in ...当组件mounted生命周期函数被调用时，我们可以通过this.$refs.itemRefs获取到所有DOM元素的引用，并进行相应的操作。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值