Vue.js3.0
- 源码组织方式的变化
- CompositionAPI
- 性能提升
- Vite
一、源码组织方式
- 源码采用TypeScript重写
- 使用Monorepo管理项目结构
二、vue.js3.0 不同构建版本
- packages/vue
- cjs
- vue.cjs.js
- vue.cjs.prod.js
- cjs
- global
- vue.global.js
- vue.global.prod.js
- vue.runtime.global.js
- vue.runtime.global.prod.js
- browser
- vue.ems-browser.js
- vue.esm-browser.prod.js
- vue.runtime.esm-browser.js
- vue.runtime.esm-browser.prod.js
- bundler
- vue.esm-bundler.js
- vue.runtime.esm-bundler.js
三、Vue.js3.0 Composition API 设计动机
-
RFC(Request For Comments)
-
CompositionAPI RFC
-
CompositionAPI设计动机
- Options API
- 包含一个描述组件选项（data、methods、props等）的对象
- Options API 开发复杂组件，同一个功能逻辑的代码被拆分到不同选项
- Options API
Options API DEMO
image.png
-
Composition API DEMO
image.png
四、性能提升
- 响应式系统提升
- vue.js2.x中响应式系统的核心 defineProperty
- vue.js3.0中使用Proxy对象重写响应式系统
- 可以监听动态新增的属性
- 可以监听删除的属性
- 可以监听数组的索引可length属性
- 编译优化
-vue.js 2.x 中通过标记静态根节点，优化diff的过程- Vue.js 3.0中标记和提升所有的静态根节点，diff的时候只需要对比动态节点内容
- Fragments（片段）(升级vetur插件)
- 静态提升
- Patch flag
- 缓存时间处理函数
- Vue.js 3.0中标记和提升所有的静态根节点，diff的时候只需要对比动态节点内容
- 源码体积的优化
- Vue.js 3.0 中移除了一些不常用的API
- 例如：inline-template、filter等
- Tree-shaking
四、Vite
ES Module
image.png
image.png
Vite 特点
快速冷启动
按需编译
模块热更新
-
在生产环境下使用Rollup打包
- 基于ES Module 的方式打包
Vue-CLI使用Webpack打包
-
Vite 创建项目
image.png
