一、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()
})

• Vue3.0中对这些API做出调整：
  将全局API，即：Vue.xxx调整到应用实例(app)上
  

2. 其他改变

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

• 过渡类名的更改
  

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

• 移除v-on.native修饰符

父组件中绑定事件
子组件中声明自定义事件

• 移除过滤器(filter)

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

四、参考链接

[01-Vue3学习笔记(尚硅谷)]