Vue3新变化
1."新"
在 API 特性方面：
Composition API：可以更好的逻辑复用和代码组织，同一功能的代码不至于像以前一样太分散，虽然Vue2中可以用minxin来实现复用代码，但也存在问题，比如：方法或属性名会冲突、代码来源也不清楚等SFC Composition API语法糖：Teleport传送门：可以让子组件能够在视觉上跳出父组件(如父组件overflow:hidden)Fragments：支持多个根节点，Vue2中，编写每个组件都需要一个父级标签进行包裹，而Vue3不需要，内部会默认添加Fragments；SFC CSS变量：支持在<style></style>里使用v-bind，给CSS绑定JS变量(color: v-bind(str))，且支持JS表达式 (需要用引号包裹起来)；Suspense：可以在组件渲染之前的等待时间显示指定内容，比如loading；v-memo：新增指令可以缓存html模板，比如v-for列表不会变化的就缓存，简单说就是用内存换时间
在 框架 设计层面：
- 代码打包体积更小：许多
Vue的API可以被Tree-Shaking，因为使用了es6module，tree-shaking依赖于es6模块的静态结构特性； - 响应式的优化：用
Proxy代替Object.defineProperty，可以监听到数组下标变化，及对象新增属性，因为监听的不是对象属性，而是对象本身，还可拦截apply、has等方法； - 虚拟DOM的优化：保存静态节点直接复用(静态提升)、以及添加更新类型标记（
patchflag）（动态绑定的元素）- 静态提升：静态提升就是不参与更新的静态节点，只会创建一次，在之后每次渲染的时候会不停的被复用；
- 更新类型标记：在对比
VNode的时候，只对比带有更新类型标记的节点，大大减少了对比Vnode时需要遍历的节点数量；还可以通过flag的信息得知当前节点需要对比的内容类型； - 优化的效果：
Vue3的渲染效率不再和模板大小成正比，而是与模板中的动态节点数量成正比；
Diff算法 的优化：Diff算法使用最长递增子序列优化了对比流程，使得虚拟DOM生成速度提升200%
在 兼容性 方面：
Vue3不兼容IE11，因为IE11不兼容Proxy
其余
v-if的优先级高于v-for，不会再出现vue2的v-for，v-if混用问题；vue3中v-model可以以v-model:xxx的形式使用多次，而vue2中只能使用一次；多次绑定需要使用syncVue3用TS编写，使得对外暴露的api更容易结合TypeScript。
2.watch 与 watchEffect
- watch作用是对传入的某个或多个值的变化进行监听；触发时会返回新值和老值；也就是说第一次不会执行，只有变化时才会重新执行
- watchEffect是传入一个立即执行函数，所以默认第一次也会执行一次；不需要传入监听内容，会自动收集函数内的数据源作为依赖，在依赖变化的时候又会重新执行该函数，如果没有依赖就不会执行；而且不会返回变化前后的新值和老值
watch加Immediate也可以立即执行
3.Fragments
Fragments 的出现，让 Vue3 一个组件可以有多个根节点（Vue2 一个组件只允许有一个根节点）
- 因为虚拟
DOM是单根树形结构的，patch方法在遍历的时候从根节点开始遍历，这就要求了只有一个根节点； - 而
Vue3允许多个根节点，就是因为引入了Fragment，这是一个抽象的节点，如果发现组件是多根的，就会创建一个Fragment节点，将多根节点作为它的children；
4.Teleport传送门
Teleport是vue3推出的新功能，也就是传送的意思，可以更改dom渲染的位置。
比如日常开发中很多子组件会用到dialog，此时dialog就会被嵌到一层层子组件内部，处理嵌套组件的定位、z-index和样式都变得困难。Dialog从用户感知的层面，应该是一个独立的组件，我们可以用<Teleport>包裹Dialog, 此时就建立了一个传送门，传送到任何地方：<teleport to="#footer">