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 判断展示哪一个数据，顺利解决🎉🎉🎉。