Vue 3.0 性能提高主要是经过哪几个方面体现的？

前言

若是是 Vue 的忠实er，会知道 Vue.js 2.x 已是足够优秀的前端框架，而且性能也不错，可是在升级的 Vue 3.0 版本中，让这个性能更上一层楼，那 Vue3.0 性能又有了哪些方面的突破了？前端

Vue 3 与 Vue 2 相比：vue

在 bundle 包大小方面（tree-shaking 减小了 41% 的体积）node
初始渲染速度方面（快了 55%）git
更新速度方面（快了 133%）github
内存占用方面（减小了 54%）web

这篇文章你将了解 Vue 3.0 性能优化的三个方法：算法

源码体积优化缓存
数据劫持优化性能优化
编译优化前端框架

1. 源码体积优化

tree-shaking，它的原理很简单，tree-shaking 依赖 ES2015 模块语法的静态结构（即 import 和 export），经过编译阶段的静态分析，找到没有引入的模块并打上标记。利用 tree-shaking 技术，若是你在项目中没有引入无关的组件，那么它们对应的代码就不会打包，这样也就间接达到了减小项目引入的 Vue.js 包体积的目的。

Vue3.0 中最直接使用 tree-shaking 技术的一个例子，在 createApp 时会经过 ensureRenderer 建立渲染器对象，可是这里并非直接建立渲染器对象，而是延时建立渲染器，目的是当用户只依赖响应式包的时候，能够经过 tree-shaking 移除核心渲染逻辑相关的代码。

2. 数据劫持优化

咱们先来回忆一下，在 Vue 3.0 以前的数据劫持，Vue.js 1.x 和 Vue.js 2.x 内部都是经过 Object.defineProperty 这个 API 去劫持数据的 getter 和 setter，具体是这样的：

Object.defineProperty(data, 'x',{
  get(){
    // 收集
  },
  set(){
    // 更新
  }
})
复制代码

核心就是 Object.defineProperty，其实 Vue.js 1.x 和 Vue.js 2.x 不支持 IE 8 及如下也是由于 Object.defineProperty 不支持。数据劫持是 Vue.js 区别于 React 的一大特点，Vue 框架中 DOM 是数据的一种映射，数据发生变化后能够自动更新 DOM，用户只须要专一于数据的修改，没有其他的心智负担。

在 Vue.js 3.0 使用了 Proxy API 作数据劫持，它是这样的：

observed = new Proxy(data, {
  get() {
    // 收集
  },
  set() {
    // 更新
  }
});
复制代码

为何替换 Object.defineProperty 到 Proxy

Object.defineProperty 和 Proxy 均可以进行数据的劫持，那为何还要将 Object.defineProperty 替换为 Proxy 了。缘由有两个：

Proxy 是如何解决 Object.defineProperty API 的缺陷

3. 编译优化

经过数据劫持和依赖收集，Vue.js 2.x 的数据更新并触发从新渲染的粒度是组件级的：

<template>
  <div id="content">
    <p class="text">1</p>
    <p class="text">2</p>
    <p class="text">3</p>
    <p class="text">{{message}}</p>
    <p class="text">4</p>
    <p class="text">5</p>
    <p class="text">6</p>
  </div>
</template>
复制代码

虽然这段代码中只有一个动态节点，但在若是 message 发生改变，单个组件内部依然须要遍历该组件的整个 vnode 树，因此这里有不少 diff 和遍历其实都是不须要的，这就会致使 vnode 的性能跟模版大小正相关，跟动态节点的数量无关，当一些组件的整个模版内只有少许动态节点时，这些遍历都是性能的浪费。

Vue.js 3.0 作到了，它经过编译阶段对静态模板的分析，编译生成了 Block tree。Block tree 是一个将模版基于动态节点指令切割的嵌套区块，每一个区块内部的节点结构是固定的，并且每一个区块只须要以一个 Array 来追踪自身包含的动态节点。

借助 Block tree，Vue.js 将 vnode 更新性能由与模版总体大小相关提高为与动态内容的数量相关，这是一个很是大的性能突破。

除此以外，Vue.js 3.0 在编译阶段还包含了对 Slot 的编译优化、事件侦听函数的缓存优化，而且在运行时重写了 diff 算法。