左小白 2024-01-24 16:13 采纳率: 100%
浏览 14
已结题

vue2，组件重复渲染问题

背景：前端机器人对话 页面展示

img

如图这个对话框的源码如下

img

如图这个机器人的对话框就是靠遍历的msgList的msg.type不断生成各种类型的对话，图中只包含了一部分类型。
现在的问题是如果对话框渲染了多个MyComponent组件那么最新data数据也会影响之前显示在对话框上的组件，就会导致对话框里所有的这个组件被重新渲染，导致的问题如下图

img

而我希望先前渲染的组件不会被重新渲染，然而data变化必然会导致组件重新渲染

  • 写回答

2条回答 默认 最新

  • 二九筒 2024-01-24 16:53
    关注

    你这个所有组件都是用的data这个参数啊 那肯定渲染出来的东西都是一模一样，要改的话只有通过for循环出来的参数在代入到data参数里面

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(1条)

报告相同问题？

  • vue解决组件重复渲染问题
    2024-01-24 16:55
    左小白的博客 最初我是直接获取这个数据（data）然后直接传递给组件MyComponent，这样会导致组件发生渲染，然后最开始的组件也会重复渲染，导致数据丢失。这部分代码是我自己定义的store模块存储数据，页面的MsgList中的数据就是...
  • 排查 Vue 项目中内容重复渲染问题
    2024-10-03 21:33
    阿贾克斯的黎明的博客 排查 Vue 项目中的内容重复渲染问题需要系统地检查各个部分的代码。通过重点排查上述目录，我们可以更有针对性地找到问题的根源，并采取相应的措施进行修复。在开发过程中，我们应该保持良好的代码结构和规范，避免...
  • 解决前端Vue的组件不重新渲染问题
    2023-01-30 16:40
    qq_52753722的博客 前端Vue
  • vue2中如何动态渲染组件
    2024-06-09 11:42
    JackChouMine的博客 方法局限了在组件内部，我们可以将这个方法抽离出来，挂载到 Vue 原型上，就可以在全局调用。了解了如何通过函数调用渲染组件，可以封装一个二次确认弹窗， 用户确认后再进行下一步操作。了解了动态渲染组件的原理，...
  • Vue2实现无限级递归组件渲染
    2024-03-22 11:33
    ThinkLess404的博客 网上搜索Vue的递归组件渲染示例，通常都是官方示例类似的树组件渲染，其递归渲染的也是其组件本身。但本人的需求是递归渲染一类组件。比如：一个画布下有文本组件，Tab布局组件，Tab布局组件中又包含了分支布局组件...
  • 如何防止组件重复渲染？
    2024-10-30 09:00
    JJCTO袁龙的博客 通过本文的讲解，可以看出防止 Vue 组件重复渲染不仅仅依赖于技术的运用，更需要良好的架构和设计思维。在使用 Vue.js 开发应用时，合理运用计算属性、观察者、条件渲染、状态管理和keep-alive组件，可以有效地降低...
  • Vue 组件渲染流程详解
    2024-07-04 10:01
    秦JaccLink的博客 Vue 组件的渲染流程包括初始化阶段、模板编译阶段、挂载阶段、更新阶段和销毁阶段。每个阶段都有相应的生命周期钩子，允许我们在组件的不同阶段执行自定义逻辑。通过理解这一流程，我们可以更好地掌握 Vue 的工作...
  • Vue - 组件重新渲染的两种方式
    2023-05-18 14:34
    风轻轻~的博客 属性，然后在需要重新渲染的时候，将组件绑定的。// 从 DOM 中删除 child 组件。// 在 DOM 中添加 child 组件。"子组件方法执行了,获取父组件的id："如果想让组件重新渲染，只需要给组件加上。
  • Vue子组件重新渲染
    2022-03-08 16:04
    zhougl996的博客 vue 子组件V-IF刷新(一般) 组件会根据v-if刷新 <item-one v-if="isref" ref="itemOne"></item-one> Vue 子组件改变KEY值刷新(最好) 组件会根据key值改变重新生成 key值可以重复使用 item改变...
  • vue 让组件强制渲染的方法
    2022-03-31 14:01
    micoria的博客 场景：在组件内，搜索框进行搜索，再进入此页面搜索内容还在，如果没有清空搜索的方法，怎么办？ 也会想到会有几种解决办法：...vue 附带的 v-if 指令相当于判断，当组件为true时才会渲染；但是如果为false，那么这个组
  • 没有解决我的问题, 去提问

问题事件

  • 系统已结题 2月2日
  • 已采纳回答 1月25日
  • 创建了问题 1月24日