# Read Vue 2
先从 Vue 2 开始 🛫
# 源码目录
看的是 vue 2.6.11
(opens new window) 的代码,vue 的的项目结构如下。
|-dist # 打包构建之后生成的文件
|-examples # 使用例子
|-flow # flow 类型生命文件
|-scripts # 构建脚本和配置文件
|-src # 项目源码
|-compiler # 编译相关
|-core # 核心代码
|-components # 内置组件 keep-alive
|-global-api # 全局 api
|-instance # 组件实例相关
|-observer # 变化检测响应式相关
|-util # 一些方法 next-tick 等
|-vdom # 实现 virtual dom 相关
|-platforms # 不同平台的支持(web, weex)
|-server # 服务端渲染
|-sfc # .vue 文件的解析
|-shared # 项目共用的方法
|-test # 项目的测试代码
# 学习安排
看一个项目代码的时候,最好是能找到一条主线,先把大体流程结构摸清楚,再深入到细节。所以这里主要按照下边这个过程进行学习,通过前面的数据驱动、组件和响应式可以了解 vue 是怎么工作的,接下来比较细化的去看对应功能和 API 的实现方式。
- 数据驱动:怎么由一个 vue 文件生产看到的页面?
- 组件:vue 文档强调组件的重要性,那组件是什么?
- 响应式:
this.foo = bar
更新一个值之后页面怎么做到更新的? - 实例方法:
$set, $on, $watch
...方法是怎么实现的? - 全局API:
nextTick
到底什么时候执行? - 生命周期:
created
的时候为什么访问不到 DOM? - 指令:
v-model
是如何实现的? - 过滤器:可被用于一些常见的文本格式化,如何实现呢?
- 内置组件:动态组件用到的
component
到底是一个什么样的组件? - 编译:打包的时候 vue-loader 最终会把
.vue
变成什么样呢? - 总结:源码的功能实现思维导图,整理相关方法的写法