目录
准备工作
1、vue.js源代码获取
Vue.js:这里我们演示解读的是Vue.js 2.6版本,
可以直接网页下载源代码:
https://github.com/vuejs/vue.githttps://github.com/vuejs/vue.git
或者 通过git clone下载:
git clone git@github.com:vuejs/vue.git
个人推荐的阅读源码的方式:
先fork一份拷贝到作为自己的一个repository,再克隆到本地进行打包,之后可以在本地调试的过程中添加自己的阅读理解相关的注释。之后提交到GitHub,以便自己后续的复习,防止自己在多终端或多机器上回顾时忘记自己已经看过的内容,以及同行新人伙伴的学习。
目录结构解读
首先我们git clone获取到的是当前项目的主分支main中的源码,也就是Vue 3.0版本的源码目录:
$ tree --dirsfirst -C -vl ./
./
├── benchmarks
│ ├── big-table
│ │ ├── demo.css
│ │ ├── index.html
│ │ └── style.css
│ ├── dbmon
│ │ ├── lib
│ │ │ ├── memory-stats.js
│ │ │ ├── monitor.js
│ │ │ └── styles.css
│ │ ├── ENV.js
│ │ ├── app.js
│ │ └── index.html
│ ├── reorder-list
│ │ └── index.html
│ ├── ssr
│ │ ├── README.md
│ │ ├── common.js
│ │ ├── renderToStream.js
│ │ └── renderToString.js
│ ├── svg
│ │ └── index.html
│ └── uptime
│ └── index.html
├── compiler-sfc
│ ├── index.d.ts
│ ├── index.js
│ ├── index.mjs
│ └── package.json
├── dist ································· 打包之后的结果存放目录,多个版本的vue打包结果
│ ├── vue.common.js
│ └── vue.runtime.common.js
├── examples ····························· 示例,通过示例可以快速体会vue的基本使用方式
│ ├── classic
│ │ ├── commits
│ │ │ ├── app.js
│ │ │ └── index.html
│ │ ├── elastic-header
│ │ │ ├── index.html
│ │ │ └── style.css
│ │ ├── firebase
│ │ │ ├── app.js
│ │ │ ├── index.html
│ │ │ └── style.css
│ │ ├── grid
│ │ │ ├── grid.js
│ │ │ ├── index.html
│ │ │ └── style.css
│ │ ├── markdown
│ │ │ ├── index.html
│ │ │ └── style.css
│ │ ├── modal
│ │ │ ├── index.html
│ │ │ └── style.css
│ │ ├── move-animations
│ │ │ └── index.html
│ │ ├── select2
│ │ │ └── index.html
│ │ ├── svg
│ │ │ ├── index.html
│ │ │ ├── style.css
│ │ │ └── svg.js
│ │ ├── todomvc
│ │ │ ├── app.js
│ │ │ ├── index.html
│ │ │ └── readme.md
│ │ └── tree
│ │ ├── index.html
│ │ └── tree.js
│ └── composition
│ ├── commits.html
│ ├── grid.html
│ ├── markdown.html
│ ├── svg.html
│ ├── todomvc.html
│ └── tree.html
├── packages
│ ├── compiler-sfc
│ │ ├── src
│ │ │ ├── stylePlugins
│ │ │ │ ├── scoped.ts
│ │ │ │ └── trim.ts
│ │ │ ├── templateCompilerModules
│ │ │ │ ├── assetUrl.ts
│ │ │ │ ├── srcset.ts
│ │ │ │ └── utils.ts
│ │ │ ├── babelUtils.ts
│ │ │ ├── compileScript.ts
│ │ │ ├── compileStyle.ts
│ │ │ ├── compileTemplate.ts
│ │ │ ├── cssVars.ts
│ │ │ ├── index.ts
│ │ │ ├── parse.ts
│ │ │ ├── parseComponent.ts
│ │ │ ├── prefixIdentifiers.ts
│ │ │ ├── rewriteDefault.ts
│ │ │ ├── stylePreprocessors.ts
│ │ │ ├── types.ts
│ │ │ └── warn.ts
│ │ ├── test
│ │ │ ├── __snapshots__
│ │ │ │ ├── compileScript.spec.ts.snap
│ │ │ │ └── cssVars.spec.ts.snap
│ │ │ ├── compileScript.spec.ts
│ │ │ ├── compileStyle.spec.ts
│ │ │ ├── compileTemplate.spec.ts
│ │ │ ├── cssVars.spec.ts
│ │ │ ├── parseComponent.spec.ts
│ │ │ ├── prefixIdentifiers.spec.ts
│ │ │ ├── stylePluginScoped.spec.ts
│ │ │ ├── tsconfig.json
│ │ │ └── util.ts
│ │ ├── api-extractor.json
│ │ └── package.json
│ ├── server-renderer
│ │ ├── src
│ │ │ ├── bundle-renderer
│ │ │ │ ├── create-bundle-renderer.ts
│ │ │ │ ├── create-bundle-runner.ts
│ │ │ │ └── source-map-support.ts
│ │ │ ├── directives
│ │ │ │ ├── index.ts
│ │ │ │ ├── model.ts
│ │ │ │ └── show.ts
│ │ │ ├── modules
│ │ │ │ ├── attrs.ts
│ │ │ │ ├── class.ts
│ │ │ │ ├── dom-props.ts
│ │ │ │ ├── index.ts
│ │ │ │ └── style.ts
│ │ │ ├── optimizing-compiler
│ │ │ │ ├── codegen.ts
│ │ │ │ ├── index.ts
│ │ │ │ ├── modules.ts
│ │ │ │ ├── optimizer.ts
│ │ │ │ └── runtime-helpers.ts
│ │ │ ├── template-renderer
│ │ │ │ ├── create-async-file-mapper.ts
│ │ │ │ ├── index.ts
│ │ │ │ ├── parse-template.ts
│ │ │ │ └── template-stream.ts
│ │ │ ├── webpack-plugin
│ │ │ │ ├── client.ts
│ │ │ │ ├── server.ts
│ │ │ │ └── util.ts
│ │ │ ├── compiler.ts
│ │ │ ├── create-basic-renderer.ts
│ │ │ ├── create-renderer.ts
│ │ │ ├── index-basic.ts
│ │ │ ├── index.ts
│ │ │ ├── render-context.ts
│ │ │ ├── render-stream.ts
│ │ │ ├── render.ts
│ │ │ ├── util.ts
│ │ │ └── write.ts
│ │ ├── test
│ │ │ ├── fixtures
│ │ │ │ ├── app.js
│ │ │ │ ├── async-bar.js
│ │ │ │ ├── async-foo.js
│ │ │ │ ├── cache-opt-out.js
│ │ │ │ ├── cache.js
│ │ │ │ ├── error.js
│ │ │ │ ├── nested-cache.js
│ │ │ │ ├── promise-rejection.js
│ │ │ │ ├── split.js
│ │ │ │ ├── test.css
│ │ │ │ ├── test.png
│ │ │ │ └── test.woff2
│ │ │ ├── async-loader.js
│ │ │ ├── compile-with-webpack.ts
│ │ │ ├── ssr-basic-renderer.spec.ts
│ │ │ ├── ssr-bundle-render.spec.ts
│ │ │ ├── ssr-stream.spec.ts
│ │ │ ├── ssr-string.spec.ts
│ │ │ ├── ssr-template.spec.ts
│ │ │ └── tsconfig.json
│ │ ├── types
│ │ │ ├── index.d.ts
│ │ │ ├── plugin.d.ts
│ │ │ ├── test.ts
│ │ │ └── tsconfig.json
│ │ ├── README.md
│ │ ├── client-plugin.d.ts
│ │ ├── index.js
│ │ ├── package.json
│ │ └── server-plugin.d.ts
│ └── template-compiler
│ ├── types
│ │ ├── index.d.ts
│ │ ├── test.ts
│ │ └── tsconfig.json
│ ├── README.md
│ ├── index.js
│ └── package.json
├── scripts
│ ├── git-hooks
│ │ ├── commit-msg
│ │ └── pre-commit
│ ├── alias.js
│ ├── build.js
│ ├── config.js
│ ├── feature-flags.js
│ ├── gen-release-note.js
│ ├── release.js
│ └── verify-commit-msg.js
├── src ····································· 源码部分,代码按不同的功能拆分到文件夹
│ ├── compiler ···················· 编译器代码,编译的作用时把模版转化为render函数,而render函数会帮我们创建虚拟DOM
│ │ ├── codegen
│ │ │ ├── events.ts
│ │ │ └── index.ts
│ │ ├── directives
│ │ │ ├── bind.ts
│ │ │ ├── index.ts
│ │ │ ├── model.ts
│ │ │ └── on.ts
│ │ ├── parser
│ │ │ ├── entity-decoder.ts
│ │ │ ├── filter-parser.ts
│ │ │ ├── html-parser.ts
│ │ │ ├── index.ts
│ │ │ └── text-parser.ts
│ │ ├── codeframe.ts
│ │ ├── create-compiler.ts
│ │ ├── error-detector.ts
│ │ ├── helpers.ts
│ │ ├── index.ts
│ │ ├── optimizer.ts
│ │ └── to-function.ts
│ ├── core ···································· vue的核心(与平台无关)
│ │ ├── components ························· 组件相关
│ │ │ ├── index.ts
│ │ │ └── keep-alive.ts ·················· 定义了vue自带的keep-alive组件
│ │ ├── global-api ·························· 定义了Vue中的全局静态方法,包含Vue.component(),Vue.filter(),Vue.extend(),Vue.mixin(),Vue.use()等
│ │ │ ├── assets.ts
│ │ │ ├── extend.ts
│ │ │ ├── index.ts
│ │ │ ├── mixin.ts
│ │ │ └── use.ts
│ │ ├── instance ···························· 创建vue实例相关,定义了vue的构造函数,以及Vue的初始化,以及生命周期挂钩相应的函数
│ │ │ ├── render-helpers
│ │ │ │ ├── bind-dynamic-keys.ts
│ │ │ │ ├── bind-object-listeners.ts
│ │ │ │ ├── bind-object-props.ts
│ │ │ │ ├── check-keycodes.ts
│ │ │ │ ├── index.ts
│ │ │ │ ├── render-list.ts
│ │ │ │ ├── render-slot.ts
│ │ │ │ ├── render-static.ts
│ │ │ │ ├── resolve-filter.ts
│ │ │ │ ├── resolve-scoped-slots.ts
│ │ │ │ └── resolve-slots.ts
│ │ │ ├── events.ts
│ │ │ ├── index.ts
│ │ │ ├── init.ts
│ │ │ ├── inject.ts
│ │ │ ├── lifecycle.ts
│ │ │ ├── proxy.ts
│ │ │ ├── render.ts
│ │ │ └── state.ts
│ │ ├── observer ··························· 响应式数实现相关代码,原理层重点核心
│ │ │ ├── array.ts
│ │ │ ├── dep.ts
│ │ │ ├── index.ts
│ │ │ ├── scheduler.ts
│ │ │ ├── traverse.ts
│ │ │ └── watcher.ts
│ │ ├── util ······························· 抽取的出来可重用的工具函数成员定义
│ │ │ ├── debug.ts
│ │ │ ├── env.ts
│ │ │ ├── error.ts
│ │ │ ├── index.ts
│ │ │ ├── lang.ts
│ │ │ ├── next-tick.ts
│ │ │ ├── options.ts
│ │ │ ├── perf.ts
│ │ │ └── props.ts
│ │ ├── vdom ······························ 虚拟DOM相关代码,重写了snabbdom