vue3笔记七(异步组件、suspense组件、teleport组件)

1、异步组件

何为异步组件？

vue3在调用这个组件时，它并不立即渲染，而是等到一些业务逻辑完成后，才会执行组件内的逻辑和渲染到页面上。

2、suspense 组件

suspense 组件有两个插槽。它们都只接收一个直接子节点。
default 插槽里的节点展示异步请求完成后，显示的模板内容；
fallback 插槽里的节点则展示异步请求加载中，显示的内容

3、异步组件 + suspense 组件

// 父组件
<template>
  <div>
    <Suspense>
      <template #default>
        <async-comp/>
      </template>
      <template #fallback>
        loading...
      </template>
    </Suspense>
  </div>
</template>

<script setup lang="ts">
  import { defineAsyncComponent } from 'vue'
  // 直接引入，npm run build 不分包
  // import AsyncComp from './AsyncComp.vue'
  
  // 通过defineAsyncComponent加载异步配合import 函数模式便可以分包
  const AsyncComp = defineAsyncComponent(() => import('./AsyncComp.vue'))
</script>

// 子组件
<template>
  <div>
    异步组件
  </div>
  <div v-for="item in list" :key="item.name">
    {{ item.name }} --- {{ item.age }}
  </div>
</template>

<script setup lang="ts">
  type List = {
    name: string,
    age: number
  }

  const getList = ():Promise<List[]> => {
    return new Promise((resolve, reject) => {
      setTimeout(() => {
        let res:List[] = [{name: '张三', age: 11}, {name: '李四', age: 22}]
        resolve(res)
      }, 3000)
    })
  }
  // <script setup> 中可以直接使用 await， 但函数声明仍需async await搭配使用
  let list:List[] = await getList()
</script>

4、teleport瞬移组件

Teleport 是一种能够将我们的模板渲染至指定DOM节点，不受父级style、v-show等属性影响，但受父级v-if的影响且data、prop数据依旧能够共用

<teleport to="body">
  <div>瞬移到body中</div>
</teleport>

原文链接：
https://xiaoman.blog.csdn.net/article/details/122909360
https://xiaoman.blog.csdn.net/article/details/122916261