共计 1507 个字符，预计需要花费 4 分钟才能阅读完成。
之前曾经理解过了 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 创立我的项目
基于模板创立