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)
    })
  }
  // 
                    
                    

你可能感兴趣的:(vue3笔记,vue.js,前端,typescript)