vue3.0知识点：页面显示空白问题解决

背景需求

项目需要对表格进行封装，可根据数据库返回数据动态显示表格列和表格样式。解决思路：在渲染表格时传入表格名称，请求拿到对应表格数据，混入表格的传参动态设置。

export function async useTable(props: Partial<DynamicTableProps>) {
  ...
  const dataProp = await sysProjectTableTableSetting({
    tableName: props?.tableName,
    userId,
  });
  ...
}

import { useTable } from '@/basic-platform/components/core/dynamic-table';
const [DynamicTable] = await useTable({
    tableName: 'RESOURCE_PERMISSION_DEPT_list',
});

此时页面一片空白...

原因

时机的问题：大多数组合式 API 函数只会在第一个 await 之前工作，setup函数工作时其实还没有拿到对应的表格数据，故页面空白。

解决1

使用suspense 包裹你的组件（不推荐）

<suspense>       
    <router-view></router-view>   
</suspense>

页面可以正常出来。但是上线后有的环境可以出来，有的环境还是一片空白（这里纠结了很久，最后看了文档才发现不推荐使用）。

<Suspense> 是一项实验性功能。它不一定会最终成为稳定功能，并且在稳定之前相关 API 也可能会发生变化。不建议使用

解决2

尽量不要在组合式 API 函数中使用await，可包裹在函数中。

不要这样：

export default defineComponent({    
    async setup() {              
        const res = await sysProjectTableTableSetting({
            tableName: props?.tableName,
            userId,
         });        
        console.log(res);        
        return {            
          res       
        };   
     }, 
 });

要这样

export default defineComponent({
    async setup() {
      let tableData = reactive({
          res: {},
      });
      const getTable = async () => {
        const res = await sysProjectTableTableSetting({
          tableName: props?.tableName,
          userId,
        });
        tableData.res = res
      }
      getTable()
      return {
        ...toRefs(tableData),
      };
    },
  });

setup语法糖

let tableData = reactive({
  res: {},
});
const getTable = async () => {
    const res = await sysProjectTableTableSetting({
      tableName: props?.tableName,
      userId,
    });
    tableData.res = res
}
getTable()