乐趣区

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

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 剖析
  • 模板编译和组件化
退出移动版