源码组织方式的变化
使用 typescript 重写
Composition Api
Options Api
包含一个描述组件选项(data, method, props 等)的对象
Options Api 开发复杂组件,同一个功能逻辑的代码被拆分到不同选项
Composition Api
- vue.js 3.x 新增的一组 API
- 一组基于函数的API
- 可以更灵活的组织组件的逻辑
性能提升
响应式系统升级
- vue.js 2.x 中响应式系统的核心 defineProperty
- Vue.js 3.x 中使用 proxy 对象重写响应式系统
1. 可以监听动态新增的属性
2. 可以监听删除的属性
3. 可以监听数组的索引和length属性
编译优化
-
vue.js 2.x 中通过标记静态根结点,优化 diff 的过程
-
vue.js 3.x 中标记和提升所有的静态根节点,diff 的时候只需要对比动态节点的内容
1. Fragments (升级 vetur 插件) 2. 静态提升 3. Patch flag 4. 缓存事件处理函数
优化打包体积
- vue.js 3.x 移除了一些不常用的 API; 例如 inline-template filter 等
- Tree-shaking
Vite
-
vite 在开发模式下不需要打包可以直接运行,而 vue-cli 在开发模式下必须对项目打包才可以运行
1. 快速冷启动 2. 按需编译 3. 模块热更新
-
vite 在生产环境下使用 Rollup 打包,基于 ES Module 的方式打包,而 vue-cli 使用webpack 打包