Vue3.0的优化以及新特性

2020-07-15 本文已影响0人 summer0125

一、源码优化

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去复用逻辑
后续补充======>