vue 源码解析(3-2-1)

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分析
• 模板编译和组件化