【金秋打卡】第10天 Vue3 + Typescript 从0到1开发通用基础组件（3-17~3-19）

课程名称：Vue3 + Typescript 从0到1开发通用基础组件

课程章节：
3-17 vue3 suspense 第一部分
3-18 vue3 suspense 第二部分
3-19 vue3 global api change

课程讲师：张轩

课程内容：

今天课程学习的主要知识点内容包括：
1、vue3 中的 suspense 组件；
2、vue3 中的 全局 api 的变化；

课程收获：

通过学习老师的视频课程和同学的公开笔记，主要收获如下：
一、vue3 中的 suspense 组件
1、suspense组件要返回一个promise；
2、suspense有两个具名插槽，default插槽表示promise返回后需要渲染的内容；fallback插槽表示promise未返回时所渲染的内容；
3、suspense组件可以用async……await……方式写返回值，更易理解；
4、如果有多个异步组件，suspense组件会等待多个组件返回完毕才开始渲染；
5、可以用生命周期钩子函数onErrorCapture监听错误的发生；
6、使用举例
（1）组件

<template>
    <h1>{{result}}</h1>
</template>

<script lang="ts">
import { defineComponent } from 'vue'
export default defineComponent({
    setup() {
        return new Promise((resolve)=>{
            setTimeout(() => {
                return resolve({
                    result: 42
                })
            }, 3000);
        })
    },
})
</script>

（2）显示

  <Suspense>
      <template #default>
        <async-show />
      </template>
      <template #fallback>
        <h1>Loading !.....</h1>
      </template>
    </Suspense>

二、vue3 中的 全局 api 的变化
1、vue2全局API遇到的问题
（1）在单元测试中，全局配置非常容易污染全局环境；
（2）在不同的apps中，共享一份有不同配置的Vue对象，也变得非常困难；

2、vue3全局API的修改
对vue对象的实例进行修改；

3、全局API的Treeshaking
对一些常用全局api采用导出的方法，支持打包器的Treeshaking；