vue异步数据切换闪烁

<template>
    <div v-if="list.length>0">
        <!-- 数据展示 -->
    </div>
    <el-empty v-else></el-empty>
</template>
<script setup>
import { ref } from "vue";
const list = ref([]);
// 假设这是异步请求
http(list.value = data)
</script>

vue学习记录

模版闪烁：类似模版 {{name}} 闪烁可以用 v-cloak 和 v-text 处理，原因是dom结构渲染未完成。

条件闪烁：网路请求存在延时，vue在v-if切换数据展示和空状态时会出现短暂的“闪烁”，这个闪烁与模版闪烁不同的是dom结构已经渲染完成。

解决：让整个条件渲染不展示，数据加载完成再判断，如果请求时间较长还可以加入骨架占位,亲测效果还不错。有其他解决方法请大佬留言。

<template>
    <div v-show="show">
        <div v-if="list.length>0">
        <!-- 数据展示 -->
        </div>
        <el-empty v-else></el-empty>
    </div>
</template>
<script setup>
import { ref } from "vue";
const list = ref([]);
const show = ref(false);
// 假设这是异步请求
http(list.value = data, show.value = true)
</script>