558、Vue 3 学习笔记 -【常用Composition API（七）】 2024.05.13-CSDN博客

本文链接：https://blog.csdn.net/youyouwuxin1234/article/details/138795215

一、Composition API的优势

1. Options API存在的问题

使用传统OptionsAPI中，新增或者修改一个需求，就需要分别在data，methods，computed里修改。

2. Composition API的优势

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

二、新的组件

1. Fragment

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

2. Teleport

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

// to可以取值：html、body、#atguigu、.box
<teleport to='移动位置'>
    <div v-if='isShow'>
        <div>
            <h3>我是一个弹窗</h3>
            <button @click='isShow = false'>关闭弹窗</button>
        </div>
    </div>
</teleport>

3. Suspense

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

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

export default{
    components:{Child}
}

使用Suspense包裹组件，并配置好default与fallback
在这里插入图片描述

三、其他

1. 全局API的转移

Vue2有许多全局API和配置
例如：注册全局组件、注册全局指令等

// 注册全局组件
Vue.component('MyButton',{
    data:() => ({
        count:0
    }),    
})

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