【闲谈Vue1.0】- 1.扬帆起航

"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这个实例模块展开的,那么我们就将它作为探寻之旅的第一站。

*****
Written by Zheng Yu on 30 November 2016