Vue3

简介

‌‌Vue 3‌ 是‌Vue.js的最新版本，它带来了许多改进和新的特性，旨在提供更好的性能、更强的类型支持以及更灵活的组件开发方式。Vue 3的推出是为了解决Vue 2中存在的一些限制，如响应式系统的限制和虚拟DOM的效率问题。Vue 3在多个方面进行了重大改进，包括其核心的响应式系统和虚拟DOM的实现。‌

优点

体积更小 性能更好 更好的TS支持 更好的代码组织 更好的逻辑抽离 更多新功能

新特性

1. 重写响应式数据（proxy）
2. VDOM重写，性能提升，对模板编译进行了优化，diff 算法，path flag 静态节点
3. Fragment，组件上层增加了虚拟节点，但是不会渲染出来
4. Tree-shaking 支持，引用并使用了才打包（大量的 API 挂载在 Vue 对象的原型上，难以实现TreeShaking）
5. Composition API，更好的代码组织，相关逻辑比较集中，setup ref 生命周期钩子 reactive 等
6. TS支持，Vue2 的 TS 支持不友好，所有属性放在this对象上，难以推导数组的数据类型
7. 异步组件写法：defineAsyncComponent(() => import(‘…/ele.vue’))
8. Teleport ：传送组件，指定该子组件渲染到父组件之外的其它 DOM 节点下，类似于弹窗中的弹窗放到body中
9. Suspense ：通过插槽实现的 loading 异步加载组件，加载插槽名为 fallback
10. 多事件：对 DOM 元素的一个操作（比如点击）可以可以绑定多个事件
11. createApp ：写法不同，之前是 new Vue、Vue.use()，现在是 Vue.createApp()、app.use()
12. 移除 .async 成为v-model：（async 子组件修改父组件传入的参数 双向绑定）
13. emits 事件：没有this了，setup第二个参数传入emit触发事件，子组件emits事件集合
14. 生命周期 ：destory变成unmount

快在哪里

1. proxy 和 reflect 实现响应式
2. diff 算法更高效，同层双端比较
3. PatchFlag 静态标记：编译模板时将不同的动态节点标记（text props），diff算法优化 区分不同类型的节点（静态节点不进行对比）
4. hoistStatic 静态提升：编译时将静态节点的定义提升到顶级作用域 缓存起来，多个相邻的静态节点会被合并，拿空间换时间的策略
5. tree-shaking ：编译时根据使用应用引入对应的API，不会一股脑全部引用
6. cacheHandler ：编译缓存事件，有缓存走缓存，没缓存重新定义，拿空间换时间
7. SSR 优化：静态节点直接输出，绕过vdom，动态节点仍然动态渲染

Options API和Composition API对比

CP带来了更好打代码组织、更好的逻辑复用、更好的类型推导
（相关的代码逻辑比较集中）
小型、简单项目可沿用OP，逻辑复杂的大型项目使用CP更便于维护