一张图了解vue3.0优化点

一张图了解vue3.0优化点

vue3.0发布已经有一段时间了，那么你现在对它的了解有多少呢？

激动又忐忑的你是不是在各大网站上看到各种关于vue3.0的介绍分析呢？

“vue2.0我还一知半解，what? 3.0都有了？”

👌我已经get到大家强烈的求知欲，结合尤大大的各种分享以及各位前辈们的分析总结，我会输出vue3.0相关文档～

首先我们来简单了解下vue的发展史：Vue.js 从 1.x 到 2.0 版本，最大的升级就是引入了虚拟 DOM 的概念，它为后续做服务端渲染以及跨端框架 Weex 提供了基础。

Vue.js 2.x 发展了很久，生态已经非常完善了，而且对于 Vue.js 用户而言，它几乎满足了我们日常开发的所有需求。在我们看来 Vue.js 2.x 已经足够优秀，但是在 Vue.js 作者眼中它还不够完美。在迭代 2.x 版本的过程中，尤大大发现了很多需要解决的痛点，比如源码自身的维护性，数据量大后带来的渲染和更新的性能问题，一些想舍弃但为了兼容一直保留的鸡肋 API 等；另外，尤大大还希望能给开发人员带来更好的编程体验，比如更好的 TypeScript 支持、更好的逻辑复用实践等。 那么接下来，我们就一起来看一下 Vue.js 3.0 具体做了哪些优化。

为了大家能够更直观的了解vue3.0的具体优化点，特制导图一份，后面也会针对部分内容进行demo讲解。

性能优化（源码体积优化之tree-shaking）：

举个例子，一个 math 模块定义了 2 个方法 square(x) 和 cube(x) ：

export function square(x) {
   
  return x * x
}
export function cube(x) {
   
  return x * x * x
}

我们在这个模块外面只引入了 plus 方法：

import {
    cube } from './math.js'
// do something with cube

最终 math 模块会被 webpack 打包生成如下代码：

/***/ (function(module, __webpack_exports__, __webpack_require__) {
   
  'use strict';
  /* unused harmony export square */
  /* harmony export (immutable) */ __webpack_exports__['a'] = cube;
  function square(x) {
   
    return x * x;
  }
  function plus(x) {
       return x * x * x;
  }
});

性能优化（数据劫持优化）：

Vue.js 1.x 和 Vue.js 2.x 内部都是通过 Object.defineProperty 这个 API 去劫持数据的 getter 和 setter，具体是这样的：

Object