# 1. 前言
博主作为一名前端开发,日常开发的技术栈是Vue
,并且用Vue
开发也有一年多了,对其用法也较为熟练了,但是对各种用法和各种api
使用都是只知其然而不知其所以然,因此,有时候在排查bug
的时候就会有点捉襟见肘。鉴于此,索性就从github
上clone
下来一份Vue
源码来学习学习,本系列博文将用来记录博主对Vue
源码的整个学习过程,以及自己对源码的一些理解。一方面开阔自己的知识视野,另一方面也希望这些文字能够带给他人些许帮助。
# 2. 学习规划
# 2.1 源码学习目录
本项目所剖析的Vue.js
源码版本是目前最新的版本,版本号为 v2.6.11 ,其代码目录如下:
├─dist # 项目构建后的文件
├─scripts # 与项目构建相关的脚本和配置文件
├─flow # flow的类型声明文件
├─src # 项目源代码
│ ├─complier # 与模板编译相关的代码
│ ├─core # 通用的、与运行平台无关的运行时代码
│ │ ├─observe # 实现变化侦测的代码
│ │ ├─vdom # 实现virtual dom的代码
│ │ ├─instance # Vue.js实例的构造函数和原型方法
│ │ ├─global-api # 全局api的代码
│ │ └─components # 内置组件的代码
│ ├─server # 与服务端渲染相关的代码
│ ├─platforms # 特定运行平台的代码,如weex
│ ├─sfc # 单文件组件的解析代码
│ └─shared # 项目公用的工具代码
└─test # 项目测试代码
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
从上面的目录结构可以看出,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
源码添加尽可能详细的注释; - 做一份思维导图,以宏观角度总览源码;
# 3. 那就开始吧
写作是一件十分枯燥的事情,如果我写的这些文字对你有些许帮助的话,还请赏个 star 哈~~
综述 →