Suspense

20_脚手架/vue3_test/21.src_Suspense/App.vue

@@ -0,0 +1,31 @@
+<template>
+  <div className="app">
+    <h3>我是app组件</h3>
+    <Suspense>
+      <template v-slot:default>
+        <Child/>
+      </template>
+      <template v-slot:fallback>
+        <h3>加载中</h3>
+      </template>
+    </Suspense>
+  </div>
+</template>
+
+<script>
+// import child from "@/components/Child";  // 静态引入
+import {defineAsyncComponent} from 'vue';
+
+const Child = defineAsyncComponent(() => import('./components/Child.vue'))  // 动态引用
+export default {
+  name: 'App',
+  components: {Child},
+}
+</script>
+
+<style>
+.app {
+  background-color: gray;
+  padding: 10px;
+}
+</style>

20_脚手架/vue3_test/21.src_Suspense/components/Child.vue

@@ -0,0 +1,29 @@
+<template>
+  <div class="child">
+    <h3>我是child组件</h3>
+    {{sum}}
+  </div>
+</template>
+
+<script>
+import {ref} from "vue";
+
+export default {
+  name: "Child",
+  setup() {
+    let sum = ref(0)
+    return new Promise((resolve,reject)=> {
+      setTimeout(()=>{
+        resolve({sum})
+      }, 1000)
+    })
+  }
+}
+</script>
+
+<style>
+  .child{
+    background-color: skyblue;
+    padding: 10px;
+  }
+</style>

20_脚手架/vue3_test/21.src_Suspense/main.js

@@ -0,0 +1,10 @@
+// 引入的不再是Vue构造函数， 引入的是一个名为createApp的工厂函数
+import { createApp } from 'vue'
+import App from './App.vue'
+
+// createApp(App).mount('#app')
+
+// 创建应用实例对象
+const app = createApp(App)
+console.log('@@@',app)
+app.mount('#app')

20_脚手架/vue3_test/src/App.vue

@@ -1,17 +1,25 @@
 <template>
   <div className="app">
     <h3>我是app组件</h3>
-    <child/>
+    <Suspense>
+      <template v-slot:default>
+        <Child/>
+      </template>
+      <template v-slot:fallback>
+        <h3>加载中</h3>
+      </template>
+    </Suspense>
   </div>
 </template>
 
 <script>
-import child from "@/components/Child";
-import {reactive, toRefs, provide} from "vue";
+// import child from "@/components/Child";  // 静态引入
+import {defineAsyncComponent} from 'vue';
 
+const Child = defineAsyncComponent(() => import('./components/Child.vue'))  // 动态引用
 export default {
   name: 'App',
-  components: {child},
+  components: {Child},
 }
 </script>
 

20_脚手架/vue3_test/src/components/Child.vue

@@ -1,15 +1,23 @@
 <template>
   <div class="child">
     <h3>我是child组件</h3>
-    <son/>
+    {{sum}}
   </div>
 </template>
 
 <script>
-import son from "@/components/Son";
+import {ref} from "vue";
+
 export default {
   name: "Child",
-  components:{son}
+  setup() {
+    let sum = ref(0)
+    return new Promise((resolve,reject)=> {
+      setTimeout(()=>{
+        resolve({sum})
+      }, 1000)
+    })
+  }
 }
 </script>
 

20_脚手架/vue3_test/src/components/Dialog.vue

@@ -1,50 +0,0 @@
-<template>
-  <div>
-    <button @click="isShow=true">点我弹个窗</button>
-    <teleport to="body">
-      <div v-if="isShow" class="mask">
-        <div class="dialog">
-          <h3>这是一个弹窗</h3>
-          <h4>内容</h4>
-          <h4>内容</h4>
-          <h4>内容</h4>
-          <button @click="isShow=false">关闭弹窗</button>
-        </div>
-      </div>
-    </teleport>
-  </div>
-</template>
-
-<script>
-import {ref} from "vue";
-
-export default {
-  name: "Dialog",
-  setup() {
-    let isShow = ref(false)
-    return {isShow}
-  }
-}
-</script>
-
-<style>
-.mask {
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  background-color: rgba(0, 0, 0, 0.5);
-}
-
-.dialog {
-  text-align: center;
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-  width: 300px;
-  height: 300px;
-  background-color: green;
-}
-</style>

20_脚手架/vue3_test/src/components/Son.vue

@@ -1,22 +0,0 @@
-<template>
-  <div class="son">
-    <h3>我是son组件</h3>
-    <Dialog/>
-  </div>
-</template>
-
-<script>
-import Dialog from "@/components/Dialog.vue";
-
-export default {
-  name: "Son",
-  components:{Dialog}
- }
-</script>
-
-<style>
-  .son{
-    background-color: orange;
-    padding: 10px;
-  }
-</style>