关于vue&uniapp 网络请求数据庞大导致页面数据未渲染

最新推荐文章于 2024-02-28 10:45:51 发布
最新推荐文章于 2024-02-28 10:45:51 发布
阅读量377 收藏
点赞数 1
文章标签： uni-app 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_68716163/article/details/134630901
版权

我是用得v-if解决问题得，因为v-if是重建元素和销毁，也就是相当于我们等网络请求数据拿到以后再改变v-if里面得真假值，来控制元素得重建和销毁，这样元素就只会在我们拿到数据以后才重建元素，这样就不会出现因为数据的庞大导致页面得不到渲染。

讲这么多那我们来看看代码层：

页面层，因为不想数据没有的时候导致页面会显示的比较空所以我就拿了一个数据加载中的一个组件来提示用户。

这个是网络请求，等拿到数据以后改变判断值，让页面层通过v-if来进行一个判断是否重建元素

前端编程小白
关注
vue中实现先请求数据再渲染dom分享
08-27
在Vue.js中，正确地在组件加载时获取数据并在数据准备好后再渲染DOM是前端开发中常见的需求。但如果不注意Vue的生命周期钩子...这样可以有效避免因数据未加载完成而导致的DOM操作错误，从而提高页面的性能和用户体验。
vue中v－for批量渲染echart，没出来
luweisixsix的博客
03-18 1893
数据是动态的，所以用v-for，echart需要渲染元素，所以要先获取元素，但是mounted里面获取不到数据，异步数据的原因? 所以把数据赋值放在created或者unmounted中 ...
uniapp 开发小程序虚拟长列表万条数据不卡顿
weixin_38946164的博客
08-24 8892
虚拟列表 只对可见区域进行渲染，对非可见区域中的数据不渲染或部分渲染，以实现减少消耗，提高用户体验的技术。它是长列表的一种优化方案，性能良好。当数据体量极大时，使用虚拟列表，可以极大减少节点的渲染，体验丝滑。
解决uniapp中数据请求到但是未渲染
zyl19950717的博客
07-06 4625
解决常见的uniapp中请求数据无法渲染的问题
问题：uniapp中增删改数据有变化但是为什么渲染不出来？
SunPeng的博客
06-07 763
uniapp中数据有变化但是为什么不渲染出来？
vue3 + Echarts 页面加载不渲染显示空白页面
技小白的博客
05-10 4655
vue3 Echarts 页面加载不渲染图表为空白
浅谈vue异步数据影响页面渲染
10-16
但在发起请求后，组件的DOM还未渲染，数据也可能还未加载完成。 一种常见的做法是通过条件渲染（例如使用`v-if`指令）来控制页面渲染时机。在数据未加载完成时，通过设置一个标识（如`appShow`为false），可以隐藏...
vue如何从接口请求数据
08-30
Vue如何从接口请求数据 在本文中，我们将介绍如何使用Vue.js从接口请求数据，并将其应用于实际项目中。通过本文，您将了解到如何使用Vue.js的生命周期钩子函数、methods、数据绑定等概念来实现数据请求和处理。 ...
vue3实现不同数据结构渲染不同的UI页面功能
最新发布
03-06
（1）数据类型的种类多：decimal、int32、int64、text、bool、enum、struct、array （2）struct结构体非常复杂，考虑的情况多，比如结构体中可能有array、struct （3）UI实现结构体的页面样式麻烦，使用多重递归组件
Vue在页面数据渲染完成之后的调用方法
12-09
在Vue.js框架中，开发者经常遇到需要在页面数据完全渲染后执行某些操作的情况，比如计算元素高度、调整布局等。由于Vue的响应式系统在数据更新时会异步更新DOM，因此不能像jQuery中的`$(document).ready()`那样直接...
uniapp/vue虚拟列表，数据列表渲染优化
weixin_43818307的博客
11-04 5132
uniapp/vue虚拟列表，数据列表渲染优化
vue 项目优化方案
jjw_zyfx的博客
04-27 1084
1、在路由离开的时候清除比较大的数组，对象等 即可以置空 比如列表展示中的数组，对象，或者页面用 this.$options.data().对象 重新赋值一下也行 2、每一个vue页面必须要添加一个name属性 大数据用对象如果只是展示而不修改的可以用Object.freeze（）给冻结了，这样也能加快速度例如： 另外： 优化方案： 1、数据静态化、数...
uniapp数据列表渲染优化
我滴博客！
02-27 2889
相信大家经常会遇到展示一堆数据的需求，几十条数据还好，要是几百上千条，甚至带上了图片。那就会卡得不行。这时候就需要按需加载。按需加载有懒加载和虚拟列表。懒加载：通过JS滚动或触底触发事件来加载更多的数据，类似分页。虚拟列表：只加载可视区域的数据，通过计算长度区间反推需要加载的数据来实现假滑动。二者异同很明显，懒加载虽然也有优化，可是当用户疯狂下拉刷新时候最后还是会卡，虽然很难有那种场景。懒加载的好处就是，用户往回刷时候因为加载过，所以看上面的内容会比较顺滑。
解决Vue刷新数据量过大而造成数据获取不到问题
weixin_43483324的博客
12-01 440
当使用Vuex存储数据时，刷新页面会导致数据丢失的问题是因为Vuex的状态是在内存中保存的，而不是持久化到本地存储。请注意，`vuex-persistedstate`默认使用`localStorage`作为存储引擎。要解决这个问题，你可以考虑将Vuex的状态持久化到本地存储中，以便在页面刷新后可以重新加载数据。通过以上步骤，Vuex的状态将会自动保存到本地存储中，并在页面刷新后重新加载。这样，每当页面刷新时，Vuex的状态将会从存储中加载，以便恢复之前保存的数据。// ...其他配置...
vue大数据表格上万条数据，树型表格，解决el-table表格数据量过大渲染卡死的问题，使用umy-ui的大数据表格虚拟表格虚拟滚u-table解决。
海贼王某人的博客
09-19 7315
vue大数据表格上万条数据，树型表格，解决el-table表格数据量过大渲染卡死的问题，使用umy-ui的大数据表格虚拟表格虚拟滚u-table解决。，先看看效果吧，拿实例说话，直接渲染四万多条数据不分页，树形表格可以展开。
uni-app渲染的步骤
2301_79232648的博客
01-22 1056
1.创建公共组件-(第四步：传入子组件数据)2.在pages.json的配置。3.引入组件-进行数据获取。
vue或者uniapp修改数据后页面不重新渲染
weixin_47586598的博客
02-28 1648
【代码】vue或者uniapp修改数据后页面不重新渲染。
uniapp性能优化
m0_46202781的博客
08-10 422
uniapp项目的视图层和逻辑曾是分离开的；视图层负责进行页面渲染、逻辑层负责执行后端的业务逻辑，处理数据；视图层和逻辑层分离，减少了项目的耦合程度，并且逻辑层的运算不会影响到视图层的渲染，窗体动画会比较稳。缺点：两层相互通信会有损耗。
uniapp请求数据渲染页面
05-17
在Uniapp中，可以使用Vue的数据绑定和组件化开发来实现数据请求和页面渲染。一般来说，可以使用uni.request()方法来发送请求，然后在请求成功后将数据保存到Vue的data中，最后在页面中使用数据绑定进行渲染。 以下是一个简单的例子： 1. 在Vue实例中定义data: ``` export default { data() { return { dataList: [] } }, methods: { getData() { uni.request({ url: 'https://example.com/api/data', success: res => { this.dataList = res.data } }) } }, mounted() { this.getData() } } ``` 2. 在页面中使用数据绑定进行渲染: ``` <template> <view> <view v-for="(item, index) in dataList" :key="index"> <text>{{ item.title }}</text> </view> </view> </template> ``` 在上面的例子中，我们使用了uni.request()方法发送了一个请求，请求成功后将响应数据保存到了Vue实例的dataList属性中。然后在页面中使用v-for指令将dataList中的数据进行循环渲染，最后使用数据绑定将每个数据项的title属性渲染到页面上。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值