跳到主要内容

Vue 2.0 源码阅读指南

首先是建议查看 Vue.js 贡献指南 https://github.com/vuejs/vue/blob/dev/.github/CONTRIBUTING.md#development-setup

开发环境配置​

需要安装 8 以上版本的 Nodejs, JRE 环境（用来运行 e2e 测试的 Selenium 服务）和 yarn.

clone 项目后，执行

$ yarn # 安装依赖

安装依赖 chromedriver 等一些墙外资源，可能会安装失败，可以使用淘宝镜像。

npm install chromedriver --chromedriver_cdnurl=http://cdn.npm.taobao.org/dist/chromedriver

这里我们关注源码阅读相关的东西，如何提交代码相关的说明直接略过。

安装依赖后，可以先尝试构建和执行测试。

# build all dist files, including npm packages
$ npm run build

# run the full test suite, including linting/type checking
$ npm test

默认的测试脚本执行了下面这些行为： 使用 ESLint 做代码检测 -> 使用 Flow 做类型检测 -> 做单元测试和覆盖率测试 -> 做端到端测试。

提交 PR 虽然会执行 CI，但还是建议本地先通过测试。

构建和测试通过后，我们继续看下项目结构

项目结构​

  • scripts: 包含构建相关脚本和配置。通常不需要动，但是可以通过下面文件来熟悉项目。
    • scripts/alias.js: 全局使用的模块别名。
    • scripts/config.js: dist/ 下所有文件的构建配置。可以通过配置查看 dist/ 下文件对应的源文件。
  • dist: 包含构建出来用来发布的文件。只在发布的时候发生变更，不会反应分支开发的状态。
  • flow: 包含 flow 类型定义。这些定义是全局的。
  • packages: 包含 vue-server-renderer 和 vue-template-compiler, 他们作为独立的 npm 包发布。他们由源代码自动生成，版本号和 vue 保持一致。
  • test: 包含所有测试文件。单元测试使用 Jasmine 编写，使用 Karma 运行。端到端测试使用 Nightwatch.js 编写和运行。
  • src: 包含源码，使用 ES2015 编写，flow 做类型声明。

    • compiler: contains code for the template-to-render-function compiler.

      The compiler consists of a parser (converts template strings to element ASTs), an optimizer (detects static trees for vdom render optimization), and a code generator (generate render function code from element ASTs). Note that codegen directly generates code strings from the element AST - it's done this way for smaller code size because the compiler is shipped to the browser in the standalone build.

    • core: contains universal, platform-agnostic runtime code.

      The Vue 2.0 core is platform-agnostic. That is, the code inside core is able to be run in any JavaScript environment, be it the browser, Node.js, or an embedded JavaScript runtime in native applications.

      • observer: contains code related to the reactivity system.

      • vdom: contains code related to vdom element creation and patching.

      • instance: contains Vue instance constructor and prototype methods.

      • global-api: contains Vue global api.

      • components: contains universal abstract components.

    • server: contains code related to server-side rendering.

    • platforms: contains platform-specific code.

      Entry files for dist builds are located in their respective platform directory.

      Each platform module contains three parts: compiler, runtime and server, corresponding to the three directories above. Each part contains platform-specific modules/utilities which are imported and injected to the core counterparts in platform-specific entry files. For example, the code implementing the logic behind v-bind:class is in platforms/web/runtime/modules/class.js - which is imported in entries/web-runtime.js and used to create the browser-specific vdom patching function.

    • sfc: contains single-file component (*.vue files) parsing logic. This is used in the vue-template-compiler package.

    • shared: contains utilities shared across the entire codebase.

    • types: contains TypeScript type definitions

      • test: contains type definitions tests

参考​