问题:
今天项目里面有个bug,就是项目的页面下面显示数据表格,上面显示数据分析图,但是切换页面的过程中,加载特别慢。:刚进页面,如果有数据请求到,那么肯定是同时加载数据表格和echarts,而表格相对稳定,加载echarts肯定要慢一些(所需性能相对大)
解决:
这时只需要在上面加上一个数据判断
v-if="data.length>0"
大致可以理解成,当进入页面时候,dom开始加载,数据或前或后请求,exharts还在等待请求的数据然后再渲染,dom也需要等待echarts加载完成才算渲染完成。
而加了v-if="data.length>0"后,第一时间没反应过来,显然v-if判断为false,这时候dom渲染不需要等待已经完成,而后数据请求到后,v-if判断成功,最后再加载echarts。
优化:
加上一些转态等待的组件,比如
<a-span></a-span>
最后加上"v-else",echarts和状态等待只要一个
最后代码为:
<Pie3D v-if="data.length>0"/>
<a-span v-else/>
千万不能这样!!!
<a-span v-if="data.length>0"/>
<Pie3D v-else/>
也不能这样!!!
<Pie3D v-show="data.length>0"/>
<a-span v-else/>
不要问为什么,问你就废了🥹