之前曾经理解过了vue2.0版本，当初咱们来理解一下3.0版本.
首先咱们来看下变动：
- 源码组织形式的变动.
- Composition API
- 性能晋升
- Vite
首先源码的组织形式
- 首先类型束缚2.0是flow而后3.0源码采纳TypeScript重写
- 而后就是应用Monorepo治理我的项目构造
3.0
2.0
而后就是Composition API
设计动机：
- 回顾OptionsAPI
- 蕴含一个形容组件选项(data、methods、props等)的对象
- OptionsAPI开发简单组件，同一个性能逻辑的代码被拆分到不同选项
随着业务复杂度越来越高，代码量会一直的加大；因为相干业务的代码须要遵循option的配置写到特定的区域，导致后续保护十分的简单，代码可复用性也不高
CompositionAPI
- Vue.js3.0新增的一组API
- 一组基于函数的API
- 能够更灵便的组织组件的逻辑
通过compostion API显然咱们能够更加优雅的组织咱们的代码，函数。让相干性能的代码更加有序的组织在一起
setup函数
vue3中专门为组件提供的新属性.它为咱们应用vue3的Composition API 新特新提供了对立的入口.之前定义的data,methods等都对立放入setup中实现。
setup函数会在beforeCreate之后、created之前 所以它外部的this指向window,
接管外界传入的props,承受的组件必须props里须要申明否则拿不到传值.
//home.vue里 < setup : data = "123" ></setup >//setup.vue里export default { setup (props) { console.log(props.data) }, props: { data: Number }}在新版的生命周期函数，能够按需导入到组件中，且只能在setup()函数中应用.
import { onMounted, onUnmounted } from 'vue';export default { setup () { onMounted(() => { // }); onUnmounted(() => { // }); }};性能晋升
- 响应式系统升级
- 编译优化
- 源码体积的优化
vue2.x中响应式零碎的外围defineProperty
vue3.0中应用Proxy对象重写响应式零碎
- 能够监听动静新增的属性
- 能够监听删除的属性
- 能够监听数组的索引和length属性
- 不须要一个一个侵入对象递归劫持属性,而是间接代理对象
编译优化：
2.x中通过标记动态根节点，优化diff的过程
3.0中标记和晋升所有的动态根节点，diff的时候只须要比照动静节点内容
- Fragments（降级vetur插件）
- 动态晋升
- Patchflag
- 缓存事件处理函数
优化代码打包体积，Vue.js3.0中移除了一些不罕用的API，例如：
inline-template、filter等，而后就是Tree-shaking 摇树优化
最初是Vite
首先咱们来看esm
- 古代浏览器都反对ESModule（IE不反对）
通过上面的形式加载模块
- <script type="module" src="..."></script>
反对模块的script默认提早加载,module默认提早加载
- 相似于script标签设置defer
- 在文档解析实现后，触发DOMContentLoaded事件前执行
Vite比照Vue-CLI
Vite在开发模式下不须要打包能够间接运行
- 疾速冷启动
- 按需编译
- 模块热更新
Vite在生产环境下应用Rollup打包
- 基于ESModule的形式打包,打进去的包体积更小
- Vue-CLI开发模式下必须对我的项目打包才能够运行
vite创立我的项目
基于模板创立