一、源码优化
1. 更好的代码管理方式:monorepo
Vue.js 3.0 通过monorepo方式维护,根据功能拆分成packages目录下不同的子目录。某些package(比如:reactivity响应式库)可以单独依赖这个库,而不必依赖整个Vue.js,减少了引用包的体积大小,二Vue.js2做不到。
2. 用Typescript重构了Vue代码
Vue.js 1.x ----> javascript
Vue.js 2.x ----> javascript + flow
Vue.js 3.x ----> typescript
二、性能优化
1. 源码体积优化
- 移除了一些冷门特性,比如filter、inline-template等
- 引入tree-shaking技术,减少打包体积
tree-shaking原理:依赖ES2015模块语法静态结构(即import 和 export),通过编译阶段的静态分析,找到没有引入的模块并打上标记。然后压缩阶段利用uglify-js、terser等压缩工具真正地删除这些没用的代码。
如果项目中没有引用Transition、KeepAlive等组件,那么打包就会移除,从而减少项目引入Vue.js体积
2. 数据劫持优化
Vue.js 1.x 和Vue.js 2.x
Object.defineProperty(data, 'a', {
get() {
// track
},
set() {
// trigger
}
})
缺点:
- 不能监测到对象的添加和删除,通过$set、$delete实例方法实现
- 不能数组基于下标的修改、对于 .length 修改的监测
3.不支持 对 Map、Set、WeakMap 和 WeakSet类型 - 潜逃层级比较深的对象,无法判断到你到底访问到哪个层级,就需要递归遍历对象,执行Object.defineProperty把每一层对象数据都变为响应式,性能消耗大
Vue.js 3.x
observed = new Proxy(data, {
get(target, key) {
// 截所有对源对象属性的访问动作
// track
},
set(target, key, value) { // 包括添加和修改
// 拦截所有对源对象属性的设置动作
// trigger
},
has() {
// in运算符
},
apply() {
// 拦截函数的调用、call和apply操作
},
deleteProperty() {
// 删除属性
},
defineProperty() {
// 拦截
},
construct() {
// 用于拦截new命令
},
getOwnPropertyDescriptor() {
// 拦截Object.getOwnPropertyDescriptor()
},
getPrototypeOf(target) {
// 拦截获取对象原型
// Object.getPrototypeOf(p) === proto
},
isExtensible() {
// 拦截Object.isExtensible操作
},
ownKeys(target) {
// 拦截对象自身属性的读取操作
// 注:有三类属性会被 ownKeys方法自动过滤:
// ·目标对象不存在的属性
// ·属性名为Symbol值
// ·不可遍历的属性
return Reflect.ownKeys(target).fliter(key => key[0] !== '_'); // 注:ownKeys方法返回的数组成员只能是字符串或 Symbol值.
},
preventExtensions() {
// 拦截Object.preventExtensions()
},
setPrototypeOf(){
// 拦截Object.setPrototypeOf()
}
})
优点:
- 对于增加和删除都能监测到
- Proxy API不能监听深层次对象变化,那么Vue.js 3.0处理方式是在getter中去递归响应式,即只能在真正访问到的内部对象才会变成响应式(惰性监测)
三、编译优化
template compile to render function阶段可以借助vue-loader在webpack编译阶段离线完成
那么耗时更多的patch阶段优化:通过编译阶段对静态模版的分析,编译生成Block Tree,只把绑定数据的动态节点加入嵌套区块数据,每个区块以数组追踪
*vNode更新性能和动态内容的数据相关
四、语法API优化: Composition API
1. 优化逻辑组织
Vue1.x和Vue2.x编写组件本质为:编译一个包含描述组件选项的对象,称为:Options API
通常包含:props、methods、data、computed、watch(都是在initState函数中被初始化)
Composition API:将某个逻辑关注点相关的代码全部放在一个函数里,这样修改一个功能时,就不需要在文件中跳来跳去
2. 优化逻辑复用
Vue.2.x 中用mixins去复用逻辑
后续补充======>
网友评论