之前已经了解过了vue2.0版本，现在我们来了解一下3.0版本.
首先我们来看下变化：
- 源码组织方式的变化.
- Composition API
- 性能提升
- Vite
- 首先类型约束2.0是flow然后3.0源码采用TypeScript重写
- 然后就是使用Monorepo管理项目结构
文章图片
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 = "https://www.it610.com/article/123" >
//setup.vue里
export default {
setup (props) {
console.log(props.data)
},
props: {
data: Number
}
}在新版的生命周期函数，可以按需导入到组件中，且只能在setup()函数中使用.
import { onMounted, onUnmounted } from 'vue';
export default {
setup () {
onMounted(() => {
//
});
onUnmounted(() => {
//
});
}
};
性能提升
- 响应式系统升级
- 编译优化
- 源码体积的优化
vue3.0中使用Proxy对象重写响应式系统
- 可以监听动态新增的属性
- 可以监听删除的属性
- 可以监听数组的索引和length属性
- 不需要一个一个侵入对象递归劫持属性,而是直接代理对象
2.x中通过标记静态根节点，优化diff的过程
3.0中标记和提升所有的静态根节点，diff的时候只需要对比动态节点内容
- Fragments（升级vetur插件）
- 静态提升
- Patchflag
- 缓存事件处理函数
inline-template、filter等，然后就是Tree-shaking 摇树优化
最后是Vite 首先我们来看esm
- 现代浏览器都支持ESModule（IE不支持）
- 通过下面的方式加载模块
- 支持模块的script默认延迟加载,module默认延迟加载
- 类似于script标签设置defer
- 在文档解析完成后，触发DOMContentLoaded事件前执行
- Vite在开发模式下不需要打包可以直接运行
- 快速冷启动
- 按需编译
- 模块热更新
- Vite在生产环境下使用Rollup打包
- 基于ESModule的方式打包,打出来的包体积更小
- Vue-CLI开发模式下必须对项目打包才可以运行
文章图片
【Vue3.0】基于模板创建
文章图片
推荐阅读
- 2022全面升级Vue3 + TS 仿知乎专栏企业级项目完结无密含资料
- vue3|vue3调用高德天气
- Vue3 从入门到实战 进阶式掌握完整知识体系含源码ppt无mi分xiang
- #|vue3下watch的使用
- vue3.0|vue3中实现音频播放器APlayer
- Vue3.x 新特性总结
- vue3|vue3学习7（props以及验证）
- 极客日常|【极客日常】vue3中实现Array数组更新的方法
- vue3|Vue3学习之旅-Vue3组件化开发(三)-动态/异步组件-vue3生命周期-组件的v-model