这是我参与11月更文挑战的第28天，活动详情查看：2021最后一次更文挑战

Suspense

等待异步组件时渲染一些额外内容，让应用有更好的用户体验 使用步骤： 异步引入组件

import {defineAsyncComponent} from 'vue'
const Child = defineAsyncComponent(()=>import('./components/Child.vue'))

使用Suspense包裹组件，并配置好default 与fallback

<template>
    <div class="app">
        <h3>我是app组件</h3>
        <Suspense>
            <template v-slot:defalut>
                <Child/>
            </template>
            <template v-slot:fallback>
                <h3>加载中。。。</h3>
            </template>
        </Suspense>
    </div>
</template>

该组件可以异步加载suspense组件包裹的内容，在没有完成内容加载的时候默认显示v-slot:fallback模板中的内容，有点像loading，可以提高用户体验

这个时候，我们可以这样写：

import {ref} from 'vue'
async setup(){
    let sum = ref(0)
    let p = new Promise((resolve,reject)=>{
      setTimeout(() => {
        resolve({sum})
      }, 2000);
    })
    return await p
  }

这样写的话，我们可以实现子组件等待2秒之后出现的效果...

之前有说过setup中不能用async，但其实是因为那个时候我们还没有学习到这个异步组件，今天学到了，那么，我们可以再加上一句话：setup也可以返回一个Promise实例，但需要Suspense和异步组件的配合。

vue3其他变化

1：全局API的转移

vue2.x有许多全局的API和配置

例如：注册全局组件，注册全局指令等

//注册全局组件
Vue.component('MyButton',{
    data:()=>({
        count:0
    }),
    template:'<button @click="count++" >Clicked{{count}} times.</button>'
})
//注册全局指令
Vue.directive('focus',{
    inserted:el=>el.focus()
})

Vue3中对这些API做了调整 将全局的API，即Vue.xxx调整到应用实例（app）上

2.x全局API	3.x实例API
Vue.config.xxxx	app.config.xxxx
Vue.config.productionTip(关闭Vue的生产提示：false)	移除
Vue.component	app.component
Vue.directive	app.directive
Vue.mixin	app.mixin
Vue.use	app.use
Vue.prototype	app.config.globalProperties

我们上面看到的app即：

import App from './App.vue
const app = createApp(App)

2.其他改变

data选项应始终被声明为一个函数

过渡类名的更改：

vue2

.v-enter,
v-leave-to{
    opacity:0
}
.v-leave,
v-enter-to{
    opacity:1
}

vue3

.v-enter-from,
.v-leave-to{
    opacity:0
}
.v-leave-from,
.v-enter-to{
    opacity:1
}

移除了KeyCode作为v-on的修饰符，同时也不再支持config，keyCodes

移除了v-on.native修饰符

移除过滤器(filter)

。。。