vue3 解决数据最初始为空，页面出现空白或者默认值

1. 问题描述

存在一个数组 tabsBars，当我们判断其为空时，显示默认文本，当其异步获取数据后，显示正常内容。

const tabsBars = ref([]);const getInfo = async () => {const res = await getListApi();tabsBars.value = res.tabsList;
};onMounted(() => {getInfo();
});const renderContent = () => !tabsBars.value.length ? <div>默认文本数据xxx</div> : <div class={styles.team_tab_container}><ElTabs v-model={} type="">指定文本内容xxx</ElTabs></div>;return () => (<div class={`${!tabsBars.value.length && styles.display_center}`}>{renderContent()}</div>
);

此时虽然可以顺利实现需求，但是会出现一个现象，页面最开始展示“默认文本数据xxx”，一瞬间后，展示“指定文本内容xxx”，实际开发中需要解决该问题。

2. 产生原因

简单分析一下可知，造成该问题的原因是，最开始渲染页面的时候，tabsBars 为空数组，导致展示默认数据，异步请求之后，tabsBars 重新赋值，页面再次渲染，展示指定内容。

3. 解决方法

我们需要一个额外的变量 isRendered，判断页面是否渲染完成，当页面成功渲染，获取数据后，再去判断 tabsBars 是否有值，进行后续处理。

const tabsBars = ref([]);
// 页面是否渲染完成
const isRendered = ref(false);const getInfo = async () => {const res = await getListApi();tabsBars.value = res.tabsList;isRendered.value = true;
};onMounted(() => {getInfo();
});const renderContent = () => !tabsBars.value.length ? <div>默认文本数据xxx</div> : <div class={styles.team_tab_container}><ElTabs v-model={} type="">指定文本内容xxx</ElTabs></div>;return () => (<div class={`${!tabsBars.value.length && styles.display_center}`}>{isRendered.value && renderContent()}</div>
);

此时真正实现根据 tabsBars 判断展示哪一个数据，顺利解决🎉🎉🎉。