vue接口多个参数多个组件互动导致数据渲染混乱bug

最新推荐文章于 2022-10-10 14:58:50 发布
最新推荐文章于 2022-10-10 14:58:50 发布
阅读量1.8k 收藏 1
点赞数
分类专栏： Vue JavaScript 文章标签： vue.js 前端 vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_61273407/article/details/123922042
版权

问题 :

当接口参数太多时候, 组件太多的时候, 参数变化条件很多的时候

会出现事件队列混乱, 数据混乱

解决方法 :

1. 减少事件队列, 接口直接写到渲染数据的组件里, 不让接口数据在其它组件再传到渲染数据的组件里

2. 尽量不要使用vuex传参, 直接使用兄弟组件传参, 可以更直观的看到事件队列执行顺序

3. 判断数据渲染的条件, 要细心耐心, 做好条件判断再渲染数据

4. 当数据走到哪一步, 一定要打印出来看一看, 一个也不能丢掉

5. 接口要使用带参数的接口方法, 这样就可以控制具体参数来请求数据

6. 每次更新接口返回数据, 要判断时机清空之前的数据

晒黑的小神仙
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue中 两个地方用同一个对象数据，数据互不影响的方法
m0_72883244的博客
04-17 234
这样，通过创建对象的副本，可以确保一个地方修改数据后，另一个地方的数据不会受到影响。2，使用ES6的扩展运算符(…
详解vue中使用axios对同一个接口连续请求导致返回数据混乱的问题
10-16
主要介绍了详解vue中使用axios对同一个接口连续请求导致返回数据混乱的问题，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
vue多级嵌套组件传参
qq_21681391的博客
08-03 1138
$attrs $attrs概念： 包含了父作用域中不作为 prop 被识别 (且获取) 的特性绑定 (class 和 style 除外)。当一个组件没有声明任何 prop 时，这里会包含所有父作用域的绑定 (class 和 style 除外)，并且可以通过 v-bind="$attrs" 传入内部组件——在创建高级别的组件时非常有用。 参考文档 $listeners $listeners概念：包含了父作用域中的 (不含 .native 修饰器的) v-on 事件监听器。它可以通过 v-on="$li
在vue中用不同请求数据多次请求同一接口前端拿到的数据混乱或者拿不到数据
linlinlinhtml_的博客
10-29 3683
el-radio-button切换不同的按钮获取到列表的数据不同,多次快速切换偶尔发现显示的数据混乱,解决: 添加定时器: data(){ return { timer: null,//定时器 } }, methods: { //获取列表数据 search (data) { clearTimeout(this.timer); //清除没执行的timer定时器 this.timer = setTimeout(() =&
vue父组件props参数太大时子组件created取不到数据-解决方法
weixin_30745553的博客
09-04 544
问题： 父组件调用子组件： <mk-form :list="formList" :formvalue="formvalue"></mk-form> 其中的formList数据是用ajax调用的，数据比较大，应该有些延迟 子组件的created中调用props时，输出的是默认数据： 输出： 解决方法： 第一种...
Vue子组件重新渲染
小白的博客
02-17 6029
vue2 子组件强制刷新 把一个组件重置到初始状态是一个常见的需求， 推荐的做法有两种，一种是父组件重置子组件的 prop，另一种是子组件暴露一个重置的方法供父组件调用。 但有些时候，子组件既没有提供重置的方法，也没提供 prop 来重置自己的状态。 更重要的是，这个子组件我们还动不了。于是我们就需要一种 hack 的方式来强制子组件重置到初始状态。方法如下： <component v-...
vue实现多个元素或多个组件之间动画效果
10-17
在Vue.js中，实现多个元素或多个组件之间的动画效果是一个重要的功能，这使得用户界面更加生动和吸引人。本文将详细讲解如何在Vue中实现这一目标。 首先，我们来看多个元素的过渡。Vue中，我们可以使用`...
vue父组件向子组件传递多个数据的实例
08-27
在 Vue 中，父组件向子组件传递多个数据是非常常见的场景。本文将通过一个实例，讲解如何在 Vue 中实现父组件向子组件传递多个数据。 首先，我们需要了解在 Vue 中传递数据的两种方式：静态数据传递和动态数据传递...
Vue 组件复用多次自定义参数操作
10-15
当我们需要在多个地方使用相同功能但展示内容不同的组件时，通常会创建一个公共组件，并通过传入不同的参数来定制显示内容。本篇文章主要探讨的是如何在Vue组件复用时处理自定义参数，以便在不同场景下灵活应对。 ...
Vue中组件this指向问题
q879936814的博客
06-26 2729
提到vue的组件化开发，那么肯定会存在着data(){}用来存放数据，而一般使用的时候不能直接使用，而是需要用this来指向。 var app = new Vue({ el:"#app", data:{ }, components:{ aa:{ template:'#aaa', data(){
vue多个实例小心共享数据陷阱
u014418380的博客
07-16 1685
vue在创建多个组件或实例的时候，如果相互之间的数据不是共享的，一定要用一个函数创建data，而不是之间返回一个数据对象的引用，否则会出现多个组件之间数据共享的尴尬 <div id="components-demo3" class="demo"> <button-counter2></button-counter2> <button-cou...
axiso 拦截器
qq_40924034的博客
11-23 173
axiso 拦截器 > let cancelToken = axios.CancelToken const REQUEST_LIST = [] const removePending = config => { for(let p in REQUEST_LIST){ if (REQUEST_LIST[p].u === config.url) { REQUE...
vue、element ui中使用组件比如tinymce或el-tree等二次渲染问题
VanCool
05-26 1419
记录一下用vue和element ui经常遇到的渲染问题 有时在页面初始化好组件后，修改了值保存需要再次打开组件，发现页面并没有重新渲染。这和vue的渲染机制有关， Vue中的nextTick涉及到Vue中DOM的异步更新。 需要在每次渲染前将组件置为false，等到$nextTick方法后置为true显示。注意nextTick放在回调函数中 <tinymce v-if="showIntroduction" v-model="introduction" :hei
使用vue开发项目的时候，异步请求数据，连续触发多次请求导致的渲染的数据列表数据错误的问题解决办法。
一键写代码的博客
08-18 9240
问题描述： 在vue类型的项目开发中，我们一般都是发起异步请求从服务器获取数据后，根据数组数据使用v-for来动态渲染数据列表。 但是，如果一个请求在pending中，再次发送一个请求，最后导致渲染的list，数据重复，或是错误的问题。 原因，就是多次请求了异步接口，一个接口没有返回，另外一个接口就发出去了。因为，ajax是一个异步操作。导致，在回调的时候，两次请求成功后的回调都会执行。就导致数据，错误了。 什么情况下发生这种现象呢？ 譬如下拉滚动加载更多 或是 tab切换。 类似，这种，点击tab标
vue 多个api请求_vue-axios同时请求多个接口 等所有接口全部加载完成再处理操作...
weixin_32667955的博客
02-11 2900
我就废话不多说了，大家还是直接看代码吧~Axios.all([request1, request2, request3]).then(Axios.spread((area, acct, perms) => {console.log("全部加载完成")})).catch(err => {console.log(err.response)});需要在当前路由引入axiosimport Ax...
【知识整理】多次请求同一数据接口时导致数据渲染混乱的web前端解决方案(示例代码以vue.js开发为例)
热门推荐
qq_19891827的博客
09-18 1万+
一。在进行前端开发过程中，经常会遇到需要请求同一个数据接口但不同参数的需求，这种情况下当用户通过页面操作频繁请求该接口，而接口的不同参数响应时间差异较大时，容易引发数据渲染混乱的bug。 举例说明：假设页面上有button1,button2两个按钮，点击这两个按钮会请求同一个后台接口，但发送的参数不同，由于参数的不同后台操作数据库的查询语句会有一定差异，这就导致了不同的查询操作耗时可能差异巨大。再...
Vue组件之间的数据共享详解
zxdznyy的博客
10-10 1113
组件之间的关系有父子关系与兄弟关系，在项目中，经常会遇到组件之间数据共享的问题。本篇博客针对此问题进行讲解，希望能对读者有帮助！我们先前已经介绍了父子组件的数据传递方式。其中，父组件给子组件传递数据，需要借助props，而子组件给父组件传递数据，需要借助自定义事件$.emit()，而兄弟组件之间传递数据的方式则需要借助EventBus。通俗来说，EventBus是一个vue实例，是平行组件的沟通桥梁。这个文件也是兄弟组件进行数据传递核心，同时，两个兄弟组件都需要引入这个js文件。
Vue2.X Vue渲染组件
cc常 的博客
03-18 342
Vue2.x Vue渲染组件 写在前面： 此博客记录自己学习vue学习笔记，如有侵权，联系删！ 学习来源： Vue + Vue-Cli 快速入门教程 李南江老师各平台账号： 微博：极客江南 微信公众号：李南江 腾讯课堂： 李南江 网易云课堂：李南江 Vue渲染组件的两种方式 1、先定义注册组件, 然后在Vue实例中当做标签来使用 2、先定义注册组件, 然后通过Vue实例的render方法来渲染 两种渲染方法的区别 1、当做标签来渲染, 不会覆盖Vue实例控制区域 2、通过render方法来渲染, 会覆盖
【知识整理】多次快速请求同一数据接口时，由于请求返回的时间原因导致数据渲染混乱的web前端解决方案
Joanna的博客
10-08 9189
@TOC二 欢迎使用Markdown编辑器 你好！ 这是你第一次使用 Markdown编辑器 所展示的欢迎页。如果你想学习如何使用Markdown编辑器, 可以仔细阅读这篇文章，了解一下Markdown的基本语法知识。 新的改变 我们对Markdown编辑器进行了一些功能拓展与语法支持，除了标准的Markdown编辑器功能，我们增加了如下几点新功能，帮助你用它写博客： 全新的界面设计 ，将会带来...
vue多个组件使用同一数据
最新发布
06-08
如果多个Vue组件需要使用相同的数据，可以考虑使用Vuex进行状态管理。Vuex是Vue.js官方的状态管理库，它可以帮助我们集中管理组件之间共享的数据。 具体实现步骤如下： 1. 在Vuex中定义一个state对象，存储需要共享的数据。 2. 在组件中使用Vuex提供的mapState函数将state对象中的数据映射到组件的计算属性中。 3. 在需要修改共享数据的地方，使用Vuex提供的mutations函数进行修改。 4. 在组件中使用Vuex提供的mapMutations函数将mutations函数映射到组件的methods中，以便进行数据修改。 这样，在多个组件中就可以方便地使用相同的数据了。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值