suspense组件（导入异步组件）
App组件是等所有组件挂载完成后，再统一显示
如果有组件挂载很慢，会导致页面响应很慢
这时我们就需要一个组件叫suspense，用于渲染异步组件，等待时显示Loading....
注意：异步加载的组件可以用suspense，也可以不用；
但是，如果组件中setup的返回值是一个Promise对象，该组件必须要用suspense
defineAsyncComponent组合式API，用于定义异步组件
使用方法：
①导入组合式API:defineAsyncComponent
②使用类似路由懒加载方法引入组件(调用defineAsyncComponent（）回调函数引入组件)
直接这样异步引入的话刚开始还以为没有Son4这个模块，这时我们就需要suspense内置组件，可以在组件还没加载出来该模块时，显示其他内容。
相当于suspense里面有两个插槽，一个是你页面真正要放入的内容，一个是页面内容未加载出来时显示的内容。
通常配合promise使用，如果组件的setup返回的是一个promise，必须使用异步方式导入，因为是异步导入所以必须要使用suspense标签。
<!-- suspense内置组件，用于在渲染异步组件时，添加Loading效果 -->
<!-- 注意：
1.异步组件可以不使用suspense组件，但是会失去异步的作用
2.如果组件中setup的返回值是一个Promise对象，那么该组件在导入时，必须采用异步方式导入，否则该组件无法显示。并且该组件必须要使用suspense组件，否则会报错;
并且该组件必须要使用suspense组件-->
<suspense>
<!-- default插槽里面放置异步组件 -->
<template #default>
<Son4/> //最终加载完要现实的组件
</template>
<!-- fallback插槽里面放置组件没有加载完成时显示的内容 -->
<template #fallback>
Loading...
</template>
</suspense>
import {ref,provide,defineAsyncComponent} from 'vue'
// defineAsyncComponent组合式API，用于定义异步组件
// 异步导入组件
const Son4 = defineAsyncComponent(()=>import('./components/Son4.vue'))
setup方法的返回可以是promise对象
<template>
<div class="son4">
<h2>Son4</h2>
<ul>
<li>商品名称：{{ goodsName }}</li>
<li>商品价格：{{ goodsPrice }}</li>
<li>
<input type="text" v-model="goodsName">
</li>
</ul>
<button @click="show=true">显示</button>
<!-- teleport组件：官方起的名称：瞬移。通过to属性确定里面的元素移动到哪。
to属性的属性值是指定的选择器 -->
<teleport to="body">
<div v-show="show" class="box">
<ul>
<li>商品名称：{{ goodsName }}</li>
<li>商品价格：{{ goodsPrice }}</li>
</ul>
<button @click="show=false">关闭</button>
</div>
</teleport>
</div>
</template>
<script>
import { ref } from "vue";
export default {
name: "Son4",
setup() {
let goodsName = ref("小米电视");
let goodsPrice = ref(2000);
let show = ref(false)
//setup方法的返回值，可以是一个Promise对象
return new Promise((resolve,reject)=>{
setTimeout(() => {
resolve({
goodsName,
goodsPrice,
show
})
}, 2000);
})
// return {
// goodsName,
// goodsPrice,
// }
},
};
</script>
