源码组织方式

• 源码采用 TypeScript 重写
• 使用Monorepo 管理项目结构

Composition API

性能提升

响应式系统升级

• Vue.js 2.x中响应式系统的核心 defineProperty
• Vue.js 3.0 中使用Proxy对象重写响应式系统
  • 可以监听动态新增的属性
  • 可以监听删除的属性
  • 可以监听数组的索引和length属性

编译优化

• Vue.js 2.x 中通过标记静态根节点，优化diff的过程
• Vue.js 3.0 中标记和提升所有的静态根节点，diff 的时候只需要对比动态节点内容
  • Fragments（vscode 需要升级vetur 插件）
  • 静态提升
  • Patch flag
  • 缓存事件处理函数

优化打包体积

• Vue.js 3.0 中移除了一些不常用的API，例如：inline-tempalte,filter等
• 支持Tree-shaking

Vite

支持ES module

Vite 特点

• 快速冷启动
• 按需编译
• 模块热更新

Vite 对比 Vue-CLI

• Vite 在开发模式下不需要打包可以直接运行， Vue-CLI 开发模式需要打包
• Vite 在生产环境下使用Rollup打包（基于ES Module 的方式打包）,Vue-CLI使用webpack打包