同步/异步组件测试

chenxin · chenxin · commit 5cc9ef1b2d96 · 2024-06-09T11:12:22.000+08:00
diff --git a/src/component/big-content-1.vue b/src/component/big-content-1.vue
@@ -1,6 +1,6 @@
 <template>
   <!--  大组件使用场景：①异步组件方式引入 ②请求动画帧优化白屏 -->
-  <div class="big-content-box">
+  <div class="big-content-1-box">
     <div class="item" v-for="n in 9999" :key="n"/>
   </div>
 </template>
@@ -10,7 +10,7 @@
 </script>
 
 <style lang="less" scoped>
-.big-content-box {
+.big-content-1-box {
   display: flex;
   flex-wrap: wrap;
   justify-content: center;
@@ -24,4 +24,4 @@
     background-color: lightpink;
   }
 }
-</style>
+</style>
diff --git a/src/component/big-content-2.vue b/src/component/big-content-2.vue
@@ -0,0 +1,27 @@
+<template>
+  <!--  大组件使用场景：①异步组件方式引入 ②请求动画帧优化白屏 -->
+  <div class="big-content-2-box">
+    <div class="item" v-for="n in 9999" :key="n"/>
+  </div>
+</template>
+
+<script lang="ts" setup>
+
+</script>
+
+<style lang="less" scoped>
+.big-content-2-box {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  margin: 10px 0;
+  border: 2px solid dodgerblue;
+
+  .item {
+    width: 4px;
+    height: 4px;
+    margin: 0.1em;
+    background-color: lightblue;
+  }
+}
+</style>
diff --git a/src/page/defer.vue b/src/page/defer.vue
@@ -1,11 +1,11 @@
 <template>
   <div v-for="n in 999" :key="n">
-    <bigContent v-if="useDefer(n)"/>
+    <bigContent1 v-if="useDefer(n)"/>
   </div>
 </template>
 
 <script lang="ts" setup>
-import bigContent from './../component/big-content.vue';
+import bigContent1 from './../component/big-content-1.vue';
 import {defer} from './../toolFunc.ts';
 
 //白屏优化
@@ -14,4 +14,4 @@ const useDefer = ((n) => defer(n))();
 
 <style lang="less" scoped>
 
-</style>
+</style>
diff --git a/src/page/sync-async-component.vue b/src/page/sync-async-component.vue
@@ -0,0 +1,27 @@
+<template>
+  <div style="display: flex">
+    <div style="flex: 1;margin: 0 10px">
+      <el-divider>同步组件</el-divider>
+      <el-button type="primary" @click="showBigContentSync = !showBigContentSync">change</el-button>
+      <bigContentSync v-if="showBigContentSync"/>
+    </div>
+    <div style="flex: 1;margin: 0 10px">
+      <el-divider>异步组件</el-divider>
+      <el-button type="primary" @click="showBigContentAsync = !showBigContentAsync">change</el-button>
+      <bigContentAsync v-if="showBigContentAsync"/>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import {ref, defineAsyncComponent} from 'vue';
+import bigContentSync from './../component/big-content-1.vue'; // 同步组件
+const bigContentAsync = defineAsyncComponent(() => import('./../component/big-content-2.vue'));// 异步组件
+
+const showBigContentSync = ref(false);
+const showBigContentAsync = ref(false);
+</script>
+
+<style lang="less" scoped>
+
+</style>
diff --git a/src/router.ts b/src/router.ts
@@ -12,6 +12,10 @@ const router = createRouter({
             path: '/defer',
             component: () => import('./page/defer.vue'),
         },
+        {
+            path: '/sync-async-component',
+            component: () => import('./page/sync-async-component.vue'),
+        },
         {
             path: '/demo',
             component: () => import('./page/demo/index.vue'),
