"Vue 2.0都发布了!"
"我知道。"
"那你还抱着Vue 1.0啃个毛!"
"我觉得,对于了解一个事物,了解它的曾经、现在、转变,这三方面都是必不可少的。
前言
【节奏】:本系列文章记录的是自己对Vue 1.0源码的理解历程。所以节奏就很随意,时快,时慢,开心就好。
【细节】:在说到某一个模块时,可能会依赖其他的模块中的变量或者方法,如果没有出现过,别急,我会粗略介绍它的功能,并且会用类似@parsers
的注释,标明它的来源,不会影响大家的理解,等到我们一步一步解读到那个模块时,再详细说明。
【姿势】:个人觉得,最佳读此系列文章的姿势是同时打开三个窗口,【文章窗口】,【Vue 1.0 API文档窗口】,【vue 1.0源码窗口】。
【示例】:文中所贴的源码,非着重部分,都用...
省略。
远观
先从远处了解下项目的基本模块划分。
|- compiler ----------------- 编译
|- directives --------------- 指令集合
|- filters ------------------ 过滤器
|- fragment ----------------- DOM块
|- instance ----------------- Vue的实例
|- observer ----------------- 观察者
|- parsers ------------------ 转换器
|- transition --------------- 过渡
|- batcher.js --------------- 未知
|- cache.js ----------------- 缓存
|- config.js ---------------- 全局配置
|- directive.js ------------- 指令导出
|- global-api.js ------------ 全局API导出
|- index.js ----------------- 项目入口文件
|- watcher.js --------------- 导出观察者
接下来,我们要做的事情,就是一个一个文件夹扫荡,看看它们就近是什么鬼。
开始探寻
index.js
是项目的入口文件,就从这进入了。
import Vue from './instance/vue'
import installGlobalAPI from './global-api'
import { inBrowser, devtools } from './util/index'
import config from './config'
installGlobalAPI(Vue)
Vue.version = '1.0.28'
export default Vue
setTimeout(() => {
// 省略开发工具的初始化代码
...
}, 0)
这里引入Vue的实例,并且将它安装到全局,以及进行开发工具的初始化。
可以看出,整个Vue 1.0的项目是围绕./instance
这个实例模块展开的,那么我们就将它作为探寻之旅的第一站。