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