vue解决组件重复渲染问题

最新推荐文章于 2024-03-26 08:24:41 发布
最新推荐文章于 2024-03-26 08:24:41 发布
阅读量780 收藏 7
点赞数 20
文章标签： vue.js 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/heiniuCSDN/article/details/135826375
版权

背景：机器人对话框

源码：最初我是直接获取这个数据（data）然后直接传递给组件MyComponent，这样会导致组件发生渲染，然后最开始的组件也会重复渲染，导致数据丢失。

解决办法：存储每次渲染的数据并且存储到最外层的循环中

修改如下

这部分代码是我自己定义的store模块存储数据，页面的MsgList中的数据就是一条条记录的数据

然后使用这个数组中存储的数据这样，循环中每个组件都有自己的数据渲染，就不会造成影响了

左小白
关注
  • 20
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
Vue子组件重新渲染
编写博客，学习交流
03-08 3194
vue 子组件V-IF刷新(一般) 组件会根据v-if刷新 <item-one v-if="isref" ref="itemOne"></item-one> Vue 子组件改变KEY值刷新(最好) 组件会根据key值改变重新生成 key值可以重复使用 item改变的时候会带动key改变 <item-one :key="item" ref="itemOne"></item-one> <item-tow :key="item" re
vue远程加载sfc组件思路详解
01-19
问题 在我们的 vue 项目中（特别是后台系统），总会出现一些需要多业务线共同开发同一个项目的场景，如果各业务团队向项目中提供一些公共业务组件，但是这些组件并不能和项目一起打包，因为项目中不能因为某个私有模块的频繁变更而重复构建发布。 ^_^不建议在生产环境使用，代码包含eval  思路 在这种场景下我们需要将公共的业务组件部署到服务端，由客户端请求并渲染组件。 服务端解析.vue文件 使用vue-template-compiler 模板解析器，解析SFC（单文件组件） const compile = require('vue-template-compiler') // 获取sfc组件的源
Vue组件缓存策略:如何避免组件多次渲染的问题?
禅与计算机程序设计艺术
07-01 5058
作者：禅与计算机程序设计艺术 Vue组件缓存策略:如何避免组件多次渲染的问题? 作为一位人工智能专家，作为一名程序员、软件架构师和CTO，我在日常工作中发现了一个令我们非常苦恼的问题:Vue组件在渲染过程中，为什么会出现多次渲染的情况呢？为了解决这个问题，我进行了深
Vue3中v-for循环渲染之v-for与v-if一同使用
最新发布
brucexia的专栏
03-26 735
v-for与v-if一同使用，当它们处于同一节点上时，v-for的优先级比v-if更高，这意味着v-if将分别重复运行于每个v-for循环中。当只想渲染部分列表选项时，可以使用这种组合方式。【例2.20】 v-for与v-if一同使用（源代码\ch02\2.20.html）。3.x+Element Plus从入门到精通（视频教学版）》，获出版社和作者授权发布。Vue3中v-for循环渲染之v-for与v-if一同使用。在Chrome浏览器中运行程序，结果如图2-28所示。
解决vue同一slot在组件中渲染多次的问题
10-18
今天小编就为大家分享一篇解决vue同一slot在组件中渲染多次的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
解决前端Vue的组件不重新渲染问题
qq_52753722的博客
01-30 1125
前端Vue
【通俗易懂】vue同一个页面复用同一个组件多次，如何让组件的内容显示不一样
CLN1991的博客
08-25 4606
比如有现在有一个yanggb组件，我引入到我的页面中(创建了一个组件实例)，然后调用两次(在页面上调用组件实例两次)，那么当我给第一个调用绑定的对象变量的一个属性赋值了100，那么第二个调用绑定的同一个对象变量的该属性也会被赋值100，因为这两个调用在同一个作用域内绑定了同一个对象变量，而JavaScript内一切对象皆为引用，也就导致第二个调用的值跟着第二个调用的值变化了。而组件化的一个重要特性就是作用域隔离，即一个组件实例拥有一个私有的作用域，当在页面中引用了该组件之后，只有该组件实例能访问该作用域。
VUE 重复渲染的解决办法
finogeeks的博客
08-18 1375
相信和我一样选择 Vue 框架的主要原因是，它作为当前最流行的 JavaScript 前端框架之一，在轻量、效率、灵活度上面有比较强的优势。但是在实际的项目中深入使用发现，一些合理的技巧可以在一定程度上提升app的性能表现。
Vue-----循环渲染
cjx177187的博客
09-10 831
如果if和for套在一层,数据容器发生变化时,if会重新判断一遍嵌套的写法 数据容器变化时 if只判断新增的数据这样当arr 数组某一项数据发生变化时，只对新增的数据进行v-if 判断，节约渲染效率。这样又会产生新的问题:外层for的div会也创建一个挂载到DOM中解决方案:wx采用的是block元素 vue呢?这样引起的问题是：arr 数组新增一项数据时，会对每一项再做一遍v-if 循环，然后for 循环渲染。// 让数据跟真实的dom-----关联 使之不发生渲染混乱的关系。
vue3父组件多次调用同一个echarts组件，只渲染一个echarts组件的问题
我只是个很菜的前端
05-17 722
vue3父组件多次调用同一个echarts组件，只渲染一个echarts组件的问题
在Vue中如何减少组件的重复渲染
Poggie的博客
03-03 652
v-if`是条件渲染指令，当条件不满足时，不会渲染DOM元素，而`v-show`只是简单地切换CSS的`display`属性，无论条件是否满足，DOM元素都会被渲染。对于不需要立即加载的组件，可以使用动态`import()`语法进行按需加载，这样只有在需要的时候才会加载组件，避免了首页加载不需要的组件，同时也能提升应用的加载速度。通过代码层面的优化，可以减少不必要的组件渲染次数。在开发过程中，注意观察和分析组件的渲染次数，避免不必要的渲染，比如可以在开发环境中使用Vue的开发者工具来检查和优化。
浅谈vue-router路由切换 组件重用挖下的坑
12-13
问题描述：vue-router导航切换 时，如果两个路由都渲染同个组件，组件会重（chong）用,组件的生命周期钩子不会再被调用,使得组件的一些数据无法根据 path的改变得到更新 翻车现场再现： 这是我的/router/index.js 的...
vue组件 keep-alive 和 transition 使用详解
01-19
能在组件切换过程中将状态保留在内存中，防止重复渲染DOM。 包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。和 相似， 是一个抽象组件：它自身不会渲染一个 DOM 元素，也不会出现在父组件链中。 当组件在...
vue 使用canvas 详细教程
一步一个脚印，踏实努力，向着目标前进
09-12 4765
Vue.js 是一个流行的 JavaScript 框架，用于构建用户界面。它提供了一种简洁的方式来管理和渲染数据，同时也支持与其他库和工具的集成。方法获取当前的时间，并根据小时、分钟和秒钟的值计算出指针的位置。然后，我们定义了一些函数来绘制时钟的各个部分。方法绘制了一个填充整个 Canvas 的矩形。方法绘制一个矩形路径，并使用。方法绘制一个圆形路径，并使用。方法开始一个新的路径，使用。方法开始一个新的路径，使用。函数，实现时钟的动态效果。函数用于绘制时钟的外圆，函数用于绘制时钟的刻度，
Vue中强制组件重新渲染的正确方法
周红伟讲AI
06-23 193
Vue中强制组件重新渲染的正确方法 瞎转悠达 2020-12-10 12:03:00 1567 收藏 2 文章标签： vue python java javascript 数据库 版权 【大神观摩】他半年把python 学到了能出书的程度 他是知名外企技术架构师，在业余时间半年自学Python，就撰写了两部Python技术书籍，他是如何做到的？5月14日（周四）晚8点邀请您一起直播观摩。 有时候，依赖vue响应方式来更新数据是不够的，相反，我们需要手动重新渲染组件来更新数据。或者，我们可能只想抛...
vue共享组件不会重复渲染问题
qq_44052087的博客
11-15 653
vue共享组件不会重复渲染问题
vue项目中使用paper.js实现首页canvas绘制
Pure_White520的博客
04-02 1931
由于项目的定制化，需要canvas绘制机器人及机器人轨道。 1、初始化页面 提前npm安装paper.js，并引入页面中 import paper from 'paper' <template> <div> <canvas id="myCanvas" :width="canvasW" height="canvasH" ref="myCanvas"></canvas> </div> </template> 调用方法 this.
vue中如何使用canvas循环生成多张海报？
铁锤妹妹的博客
05-31 2568
一. 需求背景 长按分享图片，图片中含有自己分享链接生成的二维码，需要把二维码和背景图合成一张海报，项目需求是循环生成多张海报 二. canvas画布的生成条件 要生成画布的html元素不能是隐藏状态。如果不想页面显示出来的话，可以给个 margin-top: -999999999px; 生成画布方法需要在页面渲染结束之后执行。 三. 如何生成单个画布 ？ 思路： 根据自己的分享链接通过vue-qr生成一个二维码； 获取要生成画布的容器，比如通过id或者that.$refs获取页面元素外
vue 路由组件重新渲染问题
05-31
在 Vue 中，当路由切换时，会导致原来的组件被销毁并重新创建，这可能会导致组件重新渲染的问题。这种情况通常会影响到组件的性能和用户体验，因为组件重新渲染需要重新计算 DOM 和样式，会导致页面卡顿和闪屏的情况。 为了避免这种问题，可以采用以下几种方法： 1. 使用 keep-alive 组件 使用 keep-alive 组件可以缓存组件的状态，避免组件被销毁并重新创建。keep-alive 组件会将组件缓存起来，并在需要时重新渲染组件，避免了组件重复渲染的问题。 例如，在路由组件中使用 keep-alive 组件： ``` <template> <keep-alive> <router-view></router-view> </keep-alive> </template> ``` 2. 使用动态路由参数 使用动态路由参数可以让多个路由共用同一个组件，避免了组件重复创建和渲染的问题。例如： ``` const routes = [ { path: '/user/:id', component: User }, { path: '/admin/:id', component: User } ] ``` 在上面的例子中，`User` 组件被用于 `/user/:id` 和 `/admin/:id` 两个路由中，避免了组件的重复创建和渲染。 总之，在路由组件中避免组件的重复渲染是非常重要的，可以提高页面性能和用户体验。可以根据具体情况选择适合的方法来解决这个问题。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值