Composition API的优势

Options API存在的问题

使用传统OptionsAPI中，新增或者修改一个需求，就需要再data，methods，computed中修改

Composition API的优势

我们可以更加优雅的组织我们的代码，函数。让相关功能的代码更加有序的组织在一起。

新的组件

Fragment

• 在Vue2中：组件必须有一个根标签
• 在Vue3中：组件可以没有根标签，内部会将多个标签包含在一个Fragment虚拟元素中
• 好处：减少标签层级，减小内存占用

Teleport

• 什么是Teleport？ ---- Teleport是一种能够将我们的组件html结构移动到指定位置的技术。

<!-- 移动的未知可以是html标签也可以是自定义样式 -->
<teleport to="移动位置">
    <div v-if="isShow" class="mask">
        <div class="dialog">
            <h3>我是一个弹窗</h3>
            <button @click="isShow = false">关闭弹窗</button>
        </div>
    </div>
</teleport>

Suspense

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

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

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

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

其他

全局API的转移

• Vue 2.x 有许多全局API和配置 例如：注册全局组件、注册全局指令等。

// 注册全局组件
Vue.component('MyButton', {
    data: () => ({
        count: 0
    }),
    template: '<button @click="count++">Clicked {{count}} tims.</button>'
})

// 注册全局指令
Vue.directive('focus', {
    inserted: el => el.focus()
})

• Vue3.0中对这些API做出了调整：

将全局的API，即：Vue.xxx调整到应用实例（app）上

2.x 全局 API（Vue）	3.x 实例 API（app）
Vue.config.xxx	app.config.xxx
Vue.config.productionTip	移除
Vue.component	app.component
Vue.directive	app.directive
Vue.mixin	app.mixin
Vue.use	app.use
Vue.prototype	app.config.globalProperties

其他改变

• data选项应始终被声明为一个函数
• 过度类名的更改： Vue2.x写法

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

Vue3.x写法

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

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

• 移除了keyCode作为v-on的修饰符，同时也不再支持config.keyCodes
• 移除v-on.native修饰符 父组件中绑定事件

<my-component
    v-on:close="handleComponentEvent"
    v-on:click="handleNativeClickEvent"
/>

子组件中声明自定义事件

<script>
    export default {
        emits: ['close']
    }
</script>

• 移除过滤器（filter）

过滤器虽然看起来很方便，但它需要一个自定义语法，打破大括号内表达式“只是 JavaScript”的假设，这不仅有学习成本，而且有实现成本！建议用方法调用或计算属性去替换过滤器。