1.生命周期的变化
vue3相比vue2，生命周期名字大部分需要+on，功能类似，使用vue3API需要先引入，vue2选项API这直接调用即可。
2.多根节点
Vue2中，编写页面的时候，我们需要去将组件包裹在< div >中，否则会报错警告。
Vue3支持了多根节点组件--fragment，可以少写一层
3.Teleport
vue3提供了Teleport组件可将部分Dom移动到vue app之外的位置，比如Dialog组件
4.组合式API
vue2是选项式API，一个逻辑会在不同的位置，导致代码可读性差，需要上下来回翻看。 vue3是组合式API，可以将同一个逻辑的内容写在一起，提高了代码的可读性，复用性。
5.响应式原理
vue2响应式原理基础是ES5的一个API Object.defineProperty;他是对数据进行劫持，结合 发布订阅模式的方式来实现的
vue3响应式原理基础是ES6的ProxyAPI，来对数据进行代理，通过reactive（）函数给每一个对象都包一层Proxy，通过 Proxy 监听属性的变化，从而实现对数据的监控。
相比于vue2版本，使用proxy的优势有
1.defineProperty只能监听某个属性，不能对全对象监听；可以省去for in、闭包等内容来提升效率（直接绑定整个对象即可）
2.可以监听数组，不用再去单独的对数组做特异性操作,通过Proxy可以直接拦截所有对象类型数据的操作，完美支持对数组的监听。
6.虚拟dom
Vue3 相比于 Vue2 虚拟DOM 上增加patchFlag字段。
7.Diff 优化
patchFlag字段帮助 diff 时区分静态节点，以及不同类型的动态节点。一定程度地减少节点本身及其属性的比对。
8.事件缓存
Vue3 的cacheHandler可在第一次渲染后缓存我们的事件。相比于 Vue2 无需每次渲染都传递一个新函数，加一个click事件。
9.打包优化
tree-shaking：移除js中上下文未引用的代码，主要依赖import和export语句，用来检测代码模块是否被导入导出，且被js文件使用。
一些全局API在vue2中，是暴露在vue实例上，即使未用过，也无法通过tree-shaking消除
Vue3 中针对全局 和内部的API进行了重构，并考虑到tree-shaking的支持。因此，全局 API 现在只能作为ES模块构建的命名导出进行访问。
通过这一更改，只要模块绑定器支持tree-shaking，则 Vue 应用程序中未使用的api将从最终的捆绑包中消除，获得最佳文件大小。
10.自定义渲染API
Vue3 提供的createApp默认是将 template 映射成 html。但若想生成canvas时，就需要使用custom renderer api自定义render生成函数。
//自定义runtime-render函数 import{createApp}from'./runtime-render'
import App from './src/App' createApp(App).mount('#app')
11.TypeScript支持
Vue3 由TS重写，相对于 Vue2 有更好地TypeScript支持。
12.异步组件
Vue3 提供Suspense组件，允许程序在等待异步组件时渲染兜底的内容，如 loading ，使用户体验更平滑。使用它，需在模板中声明，并包括两个命名插槽：default和fallback。Suspense确保加载完异步内容时显示默认插槽，并将fallback插槽用作加载状态。
若想在 setup 中调用异步请求，需在 setup 前加async关键字。这时，会受到警告async setup() is used without a suspense boundary。
解决方案：在父页面调用当前组件外包裹一层Suspense组件。
