前端常见技巧实现--vue3

异步组件加载前渲染

vue3增加了Suspense标签，可以用来做异步组件未完成前的加载动画遮挡层
具体使用如下：
父组件的模板文件：

<template>
  <Suspense>
    <template #default>
      <SyncChild></SyncChild>
    </template>
    <template #fallback>
      <span>暂无数据</span>
    </template>
  </Suspense>
</template>

fallback是组件未渲染前的加载动画，也可以是静态页面

子组件中：

<template>
  <div>
    {{ list }}
  </div>
</template>

<script setup>
const promise = new Promise((resolve, reject) => {
  setTimeout(() => {
    const list = [];
    list.push(1);
    list.push(2);
    list.push(3);
    list.push(4);
    list.push(5);
    list.push(6);
    resolve(list);
  }, 2000);
});
const list = await promise;
</script>

这里使用promise模拟异步组件，实际开发中可能会使用接口