vue3

13.Vue3/project3/package.json

@@ -11,6 +11,7 @@
     "type-check": "vue-tsc --build"
   },
   "dependencies": {
+    "axios": "^1.8.3",
     "mitt": "^3.0.1",
     "pinia": "^3.0.1",
     "vue": "^3.5.13",

13.Vue3/project3/src/main.ts

@@ -1,7 +1,8 @@
 import { createApp } from 'vue'
 import router from './router'
 // import App from './views/toRaw_markRaw.vue'
-import App from './views/Teleport/index.vue'
+import App from './views/Suspense/index.vue'
+// import App from './views/Teleport/index.vue'
 // import App from './views/readonly-shallowReadonly.vue'
 // import App from './views/shallowRef-shallowReactive.vue'
 // import App from './App.vue'

13.Vue3/project3/src/views/Suspense/demo.vue

@@ -0,0 +1,41 @@
+<template>
+  <div>
+    <p>demo</p>
+    <!-- <ul>
+        <li v-for="(item,index) in list" :key="index">
+            {{ item.title }}
+        </li>
+    </ul> -->
+    
+    <p>显示:{{data}}</p>
+  </div>
+</template>
+
+<script setup>
+import axios from 'axios';
+import { ref, reactive,onMounted} from 'vue'
+let list = ref([])
+onMounted(()=>{
+    getMain()
+})
+function getMain() {
+    // let {data:{data}} =  axios.get("http://shop-api.edu.koobietech.com/prod/tagProdList");
+    // console.log(data,'数据')
+    // list.value = data;
+    axios.get("http://shop-api.edu.koobietech.com/prod/tagProdList").then(res => {
+        list.value = res.data.data
+    })
+}
+
+// async function getMain() {
+//    let res =  axios.get("http://shop-api.edu.koobietech.com/prod/tagProdList").then(res => {
+//         list.value = res.data.data
+//     })
+// }
+
+let {data:{data}}= await axios.get("http://shop-api.edu.koobietech.com/prod/tagProdList")
+console.log(data,'aa')
+</script>
+<style lang='scss' scoped>
+
+</style>

13.Vue3/project3/src/views/Suspense/index.vue

@@ -0,0 +1,24 @@
+<template>
+  <div class="sus">
+    <h1>Suspense</h1>
+    <Suspense>
+      <Demo />
+      <!-- <template #default> <Demo /> </template> -->
+      <!-- 在 #fallback 插槽中显示 “正在加载中” -->
+      <template #fallback> 正在加载中... </template>
+    </Suspense>
+  </div>
+</template>
+
+<script setup>
+import Demo from "./demo.vue";
+import { ref, reactive } from "vue";
+</script>
+<style scoped>
+  .sus {
+    width: 400px;
+    height: 400px;
+    color: #fff;
+    background: #00f;
+  }
+</style>