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 只是把首页依赖的文件,依次通过网络请求去获取,整个开发体验得到巨大提升,做到复杂项目的秒级调试和热更新。