接上一篇文章：阅读《Vue.js设计与实现》 -- 01

第二章

本书第二章，主要是告诉我们一个好的框架需要考虑的事情很多，包括：构建的产物是什么？产物构建模式？提升用户的开发体验？热更新？减少打包体积？可配置？……

这部分主要就是说：vue怎么样做到这些事情，以及vue怎么好的。属于自卖自夸，手动狗头！

提升用户的开发体验

衡量一个框架是否足够优秀的指标之一，就是看它的开发体验如何。

说白了就是出现问题提示我们程序员够不够清楚，别出个问题全是源码提示，一点进去直接跳进源码（说实话，菜鸟开发vue经常性这样，所以感觉有点自卖自夸），《Vue.js设计与实现》 中举例的是 createApp 挂载元素不存在时的一个 wran，那确实提示得很清楚

这要是都提示不清楚，那也没必要说 vue 好用了，毕竟挂载上去是最重要的一点！

如果 Vue.js 内部不做任何处理，那么我们很可能得到的是 JavaScript 层面的错误信息，例如 Uncaught TypeError: Cannot read property 'xxx' of null，根据此信息，我们很难知道问题出在哪里。

tips

我们在写代码打印 ref 对象时，如果不加 .value 就打印，打印出来的结构还是比较难看的，打印结果需要我们手动点击进去，且有很多我们不关注的无用信息。

但是其实浏览器允许我们编写自定义的 formatter，从而自定义输出形式。在 Vue.js3 的源码中，你可以搜索到名为 initCustomFormatter 的函数，该函数就是用来在开发环境下初始化自定义 formatter 的。

我们只需要设置一下goole控制台，即可优化打印结果，步骤如下：

1、打开控制台，点击如图按钮

2、找到控制台，开启 Enablecustom formatters即可

设置之后的打印结果会变成

控制框架代码的体积

这部分主要讲的就是：框架在实现相同功能时，肯定是代码越少越好，这样体积更小，请求后加载速度就更快！但是这个和上一个违背了，因为要处理好报错，肯定就要加一堆不相关的逻辑。vue想办法解决了这个问题，就是区分环境，用rollup里面的插件来设置一个Boolean值（源码为__DEV__常量 ），让开发环境有提示，生产环境因为rollup的Tree-Shaking，就不会打包进入生产环境，减小体积！

Tree-Shaking

什么是 Tree-Shaking ？在前端领域，这个概念因 rollup.js 而普及，指的就是消除那些永远不会被执行的代码，现在无论是 rollup.js 还是 webpack，都支持 Tree-Shaking。

想要实现 Tree-Shaking，必须满足一个条件，即模块必须是ESM（ES Module），因为 Tree-Shaking 依赖 ESM 的静态结构。

这里《Vue.js设计与实现》举了一个rollup打包的例子，一个input.js文件

import { foo } from './utils.js'

一个utils.js文件

export function foo(obj) {
  obj && obj.foo
}

export function bar(obj) {
  obj && obj.bar
}

使用 rollup 打包后，打包文件只会留下 foo 函数，bar 函数会被Tree-Shaking掉！

但是又发现其实 foo 也没有使用，只是引用了而已，按理说应该也要将其删除！

副作用

当调用函数的时候会对外部产生影响。这时你可能会说，上面的代码明显是读取对象的值，怎么会产生副作用呢？其实是有可能的，试想一下，如果 obj 对象是一个通过 Proxy 创建的代理对象，那么当我们读取对象属性时，就会触发代理对象的 get ，在 get 中是可能产生副作用的，例如：我们在 get 夹子中修改了某个全局变量。而到底会不会产生副作用，只有代码真正运行的时候才能知道，JavaScript 本身是动态语言，因此想要静态地分析哪些代码是永远不会被使用的很有难度。

因为静态地分析 JavaScript 代码很困难，所以像 rollup.js 这类工具都会提供一个机制，让我们能明确地告诉 rollup.js："放心吧，这段代码不会产生副作用，你可以移除它。"

如何告诉rollup呢？使用/*#__PURE__*/

代码变成：

import {foo} from './utils'
/*#__PURE__*/ foo()

框架应该输出怎样的构建产物？

这里讲解了rollup如何打包产物为你需要的格式，如果用户想直接通过script直接引入那么就要设置

菜鸟这里直接搞成表格

注意

这里第二种其实会产生两种文件，一种vue.esm-browser.js，该文件是直接给