共计 1229 个字符，预计需要花费 4 分钟才能阅读完成。
Vue 源码解析
之前咱们解析了 mini-vue 的响应式实现，和虚构 dom 库的实现，当初咱们就来解析一下 vue 外部具体是如何做的，看看它在咱们繁难实现上减少了什么。
筹备工作：
首先下载一份 vue 源代码 地址：https://github.com/vuejs/vue
这个版本是 2.6 的，剖析这个版本的起因：
- 到目前为止 vue3.0 正式版还没有公布
- 新版本公布后，现有我的项目还不会立刻降级到 3.0,2.x 还有很长一段过渡期
如果对 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 . 又启动了一个服务, 间接关上文件应该也能够), 接下来就要正式进入咱们的剖析了。
咱们分三个方向来进行解析
- 响应式原理
- 虚构 dom 剖析
- 模板编译和组件化