Vue列表部分渲染

最新推荐文章于 2024-04-03 14:50:38 发布
最新推荐文章于 2024-04-03 14:50:38 发布
阅读量1k 收藏
点赞数
分类专栏： 前端 文章标签： 前端 vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44919664/article/details/121466757
版权
本文探讨了在前端开发中，如何使用Vue.js优化消息列表的渲染过程，特别是当列表包含大量图片时，避免全量渲染导致的性能开销。通过学习Vue的更新策略，作者实现了仅对新增消息进行渲染，从而提高应用性能。具体实现是利用`slice()`和`concat()`方法更新数组，确保只渲染新增内容。
摘要由CSDN通过智能技术生成

只渲染新增的节点

之前随便写了个web聊天界面，可以发送图片。之前也没有好好学过前端，更新列表就是直接重新赋值了事，但是这次的消息列表中可能含有大量图片地址，如果全部重新渲染的话开销太大，于是对列表的部分渲染稍作了学习。
划重点：非变更方法
vue官方文档说明

代码部分

在vue定义数据的部分里定义一个数组类型
我定义的是 messageList:{}
然后从后端获取的列表是mlist[]，只需要更新新增的内容
把新增的部分用slice函数切下来，然后用concat和原数组连接上
this.messageList = mlist.slice(0, mlist.length - this.messageList.length).concat(this.messageList);

丸子家的银河龙
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
25.Vue列表渲染
爱米酱的博客
07-04 509
这一节开始我们来学一下Vue中与列表渲染相关的东西，这部分知识很重要，而且还比较多，所以我就拆成几个小节来讲。那么这一小节我们就先讲讲基本列表，把基本列表讲清楚之后，我们再讲key的原理，列表过滤和列表排序 实现效果：讲到这里这个遍历就已经实现了，但是这里还有一个特别重要的属性，就是key，我们这里不详谈这个属性，这一节我们只关注怎么配置这个属性即可，具体的深入分析内容会在下一节呈现。和key相关的内容我们可以在Vue官网的学习-->API中找到。 这个key属性就是给遍历的每一项加了一个特殊标识，虽然
26.Vue列表渲染中key的作用与原理（内含虚拟DOM的对比算法详解）
爱米酱的博客
07-08 623
25.Vue列表渲染_爱米酱的博客-CSDN博客这一节开始我们来学一下Vue中与列表渲染相关的东西，这部分知识很重要，而且还比较多，所以我就拆成几个小节来讲。那么这一小节我们就先讲讲基本列表，把基本列表讲清楚之后，我们再讲key的原理，列表过滤和列表排序实现效果：讲到这里这个遍历就已经实现了，但是这里还有一个特别重要的属性，就是key，我们这里不详谈这个属性，这一节我们只关注怎么配置这个属性即可，具体的深入分析内容会在下一节呈现。和key相关的内容我们可以在Vue官网的学习-->API中找到。 这个key属
动态渲染复选框的回显_Vue隐藏技能——运行时渲染
weixin_34000790的博客
01-29 512
一语惊人前段时间接了一个需求：能不能让用户自制组件，从而达到定制渲染某个区域的目的。说实话接到这个需求心中一惊，感叹这个想法真是大胆呀，但作为打工人，秉承着只要思想不滑坡，办法总比困难多的打工魂，即使是刀山也得上呀，历经几日的摸索调研，发现其实VUE一早就支持了这么做，只不过时过境迁，渐渐被遗忘了这个隐藏的技能。大致说一下项目的背景：我们做了一个拖拽生成报表的系统，通过拖拽内置的组件供用户定制自己...
vue-列表的渲染
sharp0016的博客
02-02 1529
** vue-列表的渲染 ** vue的列表渲染指令是基于v-for的，官方文档中是这么说的*v-for 指令需要使用 item in items 形式的特殊语法，其中 items 是源数据数组，而 item 则是被迭代的数组元素的别名。*便于理解：对于v-for他就必须使用一种特殊的语法，item in items items代表的是数据中的数组，而我们说的这些item代表的就是其中的每一项。并且在v-for中，我们拥有一个权力，可以说这个权力比什么都大，就是说对于父作用域完全访问的权力。 <li
Vue 使用slice 进行分段渲染
young_sam的博客
04-01 4088
目前遇到一些特别的需求，某个组件在一个div要渲染4个，循环渲染几个这样的div,但是给出来的数据是一组的，数量随机，所以只能用slice分割数组去渲染 在creaded里面设置好改数组的长度，保存下来，记得要用math.ceil除法，意思是进1，列如5/4 = 2 这渲染的时候，数据绑定给子组件的时候就使用slice分组数据放入， 渲染的次数是根据该数组的长度。 ...
Vue 教程（7）—— 列表渲染
读万卷书，行万里路
06-07 521
1 用 v-for 把一个数组对应为一组元素 我们用 v-for 指令根据一组数组的选项列表进行渲染。v-for 指令需要使用 item in items 形式的特殊语法，items 是源数据数组并且 item 是数组元素迭代的别名。 html： &lt;ul id="app1"&gt; &lt;li v-for="item in items"&gt; {{ite...
vue 状态更改怎样让页面局部渲染
weixin_28898107的博客
07-05 4006
问题还原：根据业务需求我需要更改showFlag的状态，控制两个模块的显示隐藏，但是初始状态下渲染的模块都没有问题，但是第二次切换页面没有重新进行渲染 问题解决： z 将v-show修改为v-if，v-if会重新渲染页面，由此问题也得到解决。 v-if和v-show的区别是什么呢？ 1.v-if:是条件渲染，每次都会重新删除或者创建元素，v-if有较高的切换性能消耗。 2....
Vue 监听列表item渲染事件方法
10-18
首先，让我们回顾一下Vue中渲染列表的基本语法： ```html {{ item.content }} ``` 在这个例子中，`v-for`指令用于遍历数组`list`，并为每一项创建一个新的`<li>`元素。`{{ item.content }}`则用于显示每一项...
vue导航栏部分的动态渲染实例
12-13
根据公司项目的需求，使用的是element-ui的nav-menu组件实现动态渲染左侧导航条的功能，这里我只写到了四级菜单。 代码部分： (item, index) in navMenu' key='index'> <el-submenu v-if='item.childs' :index=...
vue 监听窗口变化对页面部分元素重新渲染操作
10-15
在Vue框架中，监听窗口变化并据此对页面中部分元素进行重新渲染是一项重要的技能，特别是在响应式设计中，这种技术尤为重要。为了达到这一目的，可以使用Vue的内置指令和生命周期钩子函数，结合原生JavaScript的事件...
Vue对比传统模板渲染实现局部刷新
xyh的博客
12-21 4167
一、dom局部刷新流程 请求后台数据（一般用Ajax）。 将数据加载到template模板。 将模板渲染输出的html结果放到需要刷新的dom节点中。 上面第2步中提到的模板渲染框架有很多，例如underscore.js库等，但是核心流程都是获取后端的数据，按照一定的规则加载到写好的模板中，输出成在浏览器中显示的HTML的过程。 二、Vue实现局部刷新 请求后台数据。 无需进行模板渲染，...
Vue.js笔记-条件渲染 列表渲染
糖糖小菜鸟前端er
10-28 7731
条件渲染 v-if div id="demo"> div v-if="abc">{{abc.a}}div>    //该值为true时显示该标签，为false则不显示div> var vm = new Vue({ el:'#demo', data:{ abc:{ a:"1" }         } })script> if...else结构 h1
ag-gride-vue只更新单行数据，不重新渲染表格。
趟过java，遇见web
07-14 923
ag-grde-vue 仅渲染单行数据
vue中只渲染数组中的第一条或某一条
qq_44161722的博客
09-30 2371
有时候数组中有两条或多条数据，但只想渲染其中的某一条，或者在特定的页面渲染某一条二、在特定的页面渲染某一条（比如父组件在调用子组件时传过来一个值，根据这个值去判断要渲染的数据）场景：有时候数组中有两条或多条数据，但只想渲染其中的某一条，或者在特定的页面渲染某一条。一、只想渲染其中的某一条（只渲染第一条数据）子：Review-info.vue。根据数组中的index进行判断。
vue 如何渲染十万条以上的数据
qq_50994125的博客
04-14 1313
在 Vue.js 中，可以使用虚拟滚动（Virtual Scrolling）来实现高性能的长列表渲染。虚拟滚动的原理是只渲染当前可见的列表项，从而大幅减小 DOM 节点数量，提高性能。这样可以提高页面的响应速度。这种方法可以在需要时才获取和渲染数据，从而降低初始化时的性能消耗。要在 Vue.js 中实现虚拟滚动，可以使用第三方库，例如 vue-virtual-scroller。根据数据的特点，将数据分成多个部分，在适当的时机渲染每一部分。会根据滚动的位置动态渲染可见的数据项，从而实现高性能的长列表渲染。
Vue 学习随笔系列十二 -- 表格内容渲染方法
最新发布
mm_0123456789的博客
04-03 1339
示例代码1 示例代码2 2、 使用 render 函数 3、使用 template 自定义 4、使用 slot 插槽 5、注意 使用template 自定义时，columns中的序号列显示不出来，需要在代码中重新编写， 例：
vue 扫码页面限制区域_关于vue 长列表可视区域渲染问题
weixin_30212009的博客
01-17 378
参考了 大佬的文章https://zhuanlan.zhihu.com/p/...模仿着自己实现了一个长列表可视区域渲染功能 代码如下(基本和原文一致)滚动组件class="list-view-phantom":style="{ height: data.length * 30 + 'px' }">值:{{ item.value }}export default {props: {data:...
当修改一个数据时，不想整个页面都被重新渲染，只想要渲染变更数据的那一部分，怎么做？
c_c_____的博客
02-22 485
Vue 不允许在已经创建的实例上动态添加新的根级响应式属性，可以使用 Vue.set(object, key, value) 方法将响应属性添加到嵌套的对象上，也可以使用 this.$forceUpdate() 方法，可以局部更新。让数据变为响应式的，如：vue中，当页面初始化时候，vue会遍历data对象所有的属性，并使用defineProperty或Proxy把这些属性全部转化为getter/setter，所以属性必须在 data 对象上存在才能让 Vue 转换它，这样才能让它是响应的。
vue3实现局部组件重新渲染
热门推荐
qq_43393995的博客
10-14 1万+
在Vue2中我们除了使用v-if 指令让局部dom的重新渲染，也可以新建一个空白组件，需要刷新局部页面时跳转至这个空白组件页面，然后在空白组件内的beforeRouteEnter 守卫中又跳转回原来的页面。在全局状态中定义一个isRouterAlive 标识刷新状态，根据isRouterAlive 变化来重新渲染。想要实现页面的局部刷新，我们只需要实现局部组件（dom）的重新渲染。如下图所示，如何在Vue3.X中实现点击刷新按钮实现红框范围内的dom重新加载，并展示对应的加载状态。第一步：定义状态标识。
Vue.js入门：列表渲染与数据绑定详解
Vue.js入门教程深入解析列表渲染 在这个教程中，我们将学习如何在Vue.js应用中使用v-repeat指令进行列表渲染，这是Vue.js中处理数据绑定和动态内容更新的重要工具。v-repeat是Vue.js中用于遍历数组或对象数组的关键...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值