关于vue.js:vue-源码解析321

之前咱们解析了 mini-vue 的响应式实现，和虚构 dom 库的实现，当初咱们就来解析一下 vue 外部具体是如何做的，看看它在咱们繁难实现上减少了什么。

筹备工作：
首先下载一份 vue 源代码地址：https://github.com/vuejs/vue
这个版本是 2.6 的，剖析这个版本的起因：

如果对 3.0 有趣味，也能够下下载看看：https://github.com/vuejs/vue-…

src/platform 文件夹下是 Vue 能够构建成不同平台下应用的库，目前有 weex 和 web，还有服务器端渲染的库

这是咱们下载下来的一个 vue 源码 src 下代码目里构造

代码里应用了 flow 做动态类查看

打包工具应用的 Rollup，比照 webpack 更轻量，Webpack 把所有文件当做模块，Rollup 只解决 js 文件更适宜在 Vue.js 这样的库中应用，Rollup 打包也不会生成冗余的代码。
这里在做一个调试的辅助工作：

vscode 中关上设置把 javascript.validate.enable 临时设置为 false, 不查看 javascript 的语法问题，避免 flow 报错。
这回源码里局部代码是没有高亮显示的，vscode 下载一个插件
Babel javascript 开其它就有高亮显示了

npm i 下载依赖这里举荐用淘宝源 cnpm 不然有的包下载不下来

而后批改一下 package.json 文件 scripts 中 dev 命令：

"dev": "rollup -w -c scripts/config.js --sourcemap --environment TARGET:web-full-dev",

- w 是监听文件变动，文件变动主动打包
- c 设置配置文件
而后设置 sourcemap 不便调试
最初设置下环境变量 web-full-dev，这个意思就是应用 web 平台下带编译器的 dev 开发版本

umd 是通用版本，默认 vue-cli 生成我的项目应用的是 vue.runtime.esm.js 版本，esm 格局被设计成能够动态剖析，所以打包工具能够利用这点来进行 tree-shaking 摇树。

咱们调试的是 web 下带编译器（编译器：用来将模板字符串（new Vue 时传入 template 选项时须要编译器把 template 转换成 render 函数）编译成为 JavaScript 渲染函数的代码，体积大、效率低）的 dev 开发版本也就是 web-full-dev

找到 config 文件，能够看到

这里能够看到咱们以后版本的入口文件，以及输入门路文件。

而后筹备工作做好，咱们就能够启动 npm run dev，关上 examples 目录下子集目录里的 html 进行调试了.(这里是通过 serve . 又启动了一个服务, 间接关上文件应该也能够), 接下来就要正式进入咱们的剖析了。

咱们分三个方向来进行解析

Vue 源码解析