手牵手,从零学习Vue源码 系列一(前言-目录篇)

微信扫一扫,分享到朋友圈

手牵手,从零学习Vue源码 系列一(前言-目录篇)

1 前言

作为一名前端开发人员,日常开发使用Vue.js,对于各种Api使用都是只知其然而不知其所以然,不想日复一日的从入门到入门,我们已经都这个岁数了,是时候做出一些改变了!

于是我决定从即日起从GitHub上clone下来一份Vue.js源码来深入研究,本系列将一直更新至博文对Vue源码的整个学习过程,以及自己在过程中的一些理解。一方面开阔自己的知识视野,另一方面也希望这些文字能够带给大家些许帮助。

2. 学习规划

2.1 源码学习目录

本项目所剖析的

Vue.js

源码版本是目前最新的版本,版本号为

v2.9.6

,其代码目录如下:

├─ .circleci              |  持续集成/持续部署的服务,根据配置,提供运行环境,执行测试、构建和部署。
│
├─ .github                |  存放关于github上的一些配置
│
├─ .benchmarks            |  验证性能、获得一些基准数据,可以与本软件的其他版本或同类软件进行比较
│
├─ dist                   |  项目构建后的文件
│
├─ examples               |  示例文件
│
├─ flow                   |  facebook 出品的 JavaScript 静态类型检查工具
│
├─ packages               |  包含服务端渲染和模板编译器两种不同的NPM包,是提供给不同使用场景使用的
│
├─ scripts                |  存放npm脚本配置文件,结合webpack、rollup进行编译、测试、构建等操作(使用者不需要关心)
│
│   ├─ alias.js           |  模块导入所有源代码和测试中使用的别名
│   │
│   ├─ config.js          |  包含在'dist'中找到的所有文件的生成配置
│   │
│   └─ build.js           |  对 config.js 中所有的rollup配置进行构建
│
├─src                     |  项目源代码
│
│    ├─ compiler          |  解析模版相关
│    │  ├─ codegen        |  把AST转换为Render函数
│    │  │
│    │  ├─ directives     |  通用生成Render函数之前需要处理的指令
│    │  └─ parser         |  解析模版成AST
│    ├─core               |  通用的、与运行平台无关的运行时代码
│    │
│    │  ├─components      |  内置组件的代码
│    │  │
│    │  ├─global-api      |  Vue全局API,如Vue.use,Vue.extend,Vue.mixin等
│    │  │
│    │  ├─instance        |  实例化相关内容,生命周期、事件等
│    │  │
│    │  ├─observer        |  响应式核心目录,双向数据绑定相关文件
│    │  │
│    │  ├─util            |  工具方法
│    │  │
│    │  └─vdom            |  包含虚拟DOM 创建(creation)和打补丁(patching) 的代码
│    │
│    ├─platforms          |  特定运行平台的代码,如weex
│    │
│    │  ├─web             |  web端
│    │  │   ├─ compiler   |  web端编译相关代码,用来编译模版成render函数basic.js
│    │  │   │
│    │  │   ├─ runtime    |  web端运行时相关代码,用于创建Vue实例等
│    │  │   │
│    │  │   ├─ server     |  服务端渲染
│    │  │   │
│    │  │   └─ util       |  相关工具类
│    │  │
│    │  └─weex            |  基于通用跨平台的 Web 开发语言和开发经验,来构建 Android、iOS 和 Web 应用
│    │
│    ├─server             |  与服务端渲染相关的代码
│    │
│    ├─sfc                |  单文件组件的解析代码
│    │
│    └─shared             |  项目公用的工具代码
│
├─ test                   |  项目测试代码
│
├─ types                  |  Vue新版本支持TypeScript,主要是TypeScript类型声明文件
│
├─ .babelrc.js            |  babel配置
│
├─ .editorconfig          |  文本编码样式配置文件
│
├─ .eslintignore          |  eslint校验忽略文件
│
├─ .eslintrc.js           |  eslint配置文件
│
├─ .flowconfig            |  flow配置文件
│
├─ .gitignore             |  Git提交忽略文件配置
│
├─ BACKERS.md             |  赞助者信息文件
│
├─ LICENSE                |  项目开源协议
│
├─ README.md              |  说明文件
│
├─ package.json           |  依赖
│
└─ yarn.lock              |  yarn版本锁定文件
复制代码


从上面的目录结构可以看出,Vue的整个项目包含了类型检测相关、单元测试相关、与平台无关的核心代码以及跨平台运行的相关代码。

由于我们只是学习Vue.js的设计思想以及代码实现的相关逻辑,所以我们暂不去关心类型检测、单元测试以及特定平台运行等相关逻辑实现,仅关注它的核心代码,即src/core和src/complier这两个目录下的代码,并且接下来后续的学习也都是只在这两个目录的范围之内。

2.2 学习路线

在学习之前,我们需要先制定一个学习路线,循序渐进的学习,这样不至于一头雾水,无处下手。后面的学习路线如下:


  • 变化侦测篇

—- 学习Vue中如何实现数据的响应式系统,从而达到数据驱动视图;


  • 虚拟DOM篇

—- 学习什么是虚拟DOM,以及Vue中的DOM-Diff原理;


  • 模板编译篇

—- 学习Vue内部是怎么把template模板编译成虚拟DOM,从而渲染出真实DOM;


  • 实例方法篇

—- 学习Vue中所有实例方法(即所有以$开头的方法)的实现原理;


  • 全局API篇

—- 学习Vue中所有全局API的实现原理;


  • 生命周期篇

—- 学习Vue中组件的生命周期实现原理;


  • 指令篇

—- 学习Vue中所有指令的实现原理;


  • 过滤器篇

—- 学习Vue中所有过滤器的实现原理;


  • 内置组件篇

—- 学习Vue中内置组件的实现原理;

2.3 学习输出

通过一步步的学习,博主打算在学习过程中输出以下三个东西:

  • 以博客记录源码分析的过程;

  • clone下来的Vue源码添加尽可能详细的注释,详细的解读;

  • 做一份思维导图,以宏观角度总览源码;

系列文章

陆续更新中…

预计八月中旬更新完毕。

我曾踏足山巅,也曾跌入低谷,这两者都让我受益良多。个人网站: zhaohongcheng.com

微信扫一扫,分享到朋友圈

手牵手,从零学习Vue源码 系列一(前言-目录篇)

YARN 在快手的应用实践与技术演进之路

上一篇

漫威首次进军恐怖片 剧集《地狱风暴》发布正式预告片

下一篇

你也可能喜欢

手牵手,从零学习Vue源码 系列一(前言-目录篇)

长按储存图像,分享给朋友