1. Vue3新特性 —— Vue3深入学习

1. 响应式系统不同

vue2 响应式机制是基于 Object.defineProperty()这个 api 实现的，只是对对象拦截，Proxy 才是真正代理，Vue2 还需要对数组方法重写，监听数组长度的变化还需要$set api

2. 自定义渲染器

vue2 所有的模块都是糅在一起的，只服务于 Vue，这样拓展性不好。Vue3 把模块拆分开来，使用最近流行的 monorepo 管理方式、响应式、编译和运行时全部独立开来，渲染逻辑也拆成平台渲染逻辑和浏览器 api 两部分，这样更适用于跨端应用。

3. 全部模块使用 TypeScript 重构

• 更方便的提示
• 更健壮的代码

4. Composition API 组合语法

4.1 Options API 对比 Composistion API 暴露出的问题

• 由于所有的数据都挂载在 this 之上，因而 Options API 对写 TypeScript 的类型引导不是很友好，并且这样也不好做 Tree-shaking 清除代码
• 新增功能基本都修改 data、method 等配置、并且代码 300 行之后，会经常上下反复横跳，开发很痛苦
• 代码不好复用，Vue2 的组件很难抽离通用逻辑，只能使用 mixin，还会带来命名冲突问题。

4.2 Composition API 带来的好处

• 所有 API 都是 import 引入的。用到的功能都是 import 进来，对 Tree-shaking 很友好。
• 可以把 methods、data 一起书写，维护更轻松。
• 代码方便复用，可以把一个功能所有的 methods、data 封装到一个独立的函数中，复用代码更容易。

5. 新的组件

Vue3 内置了 Frgment、Teleport 和 Suspense 三个新组件。

• Fragment：Vue3 组件不再要求有一个唯一的根节点，清除了很多无用的占位 div。
• Teleport：允许组件渲染在别的元素内，主要开发弹窗组件特别有用。
• Suspense：异步组件，更方便开发有异步请求的组件。

6. 新一代工程化工具 Vite

原先的 webpack 需要项目全部预打包，而 vite 只是把首页依赖的文件，依次通过网络请求去获取，整个开发体验得到巨大提升，做到复杂项目的秒级调试和热更新。

总结