# vue源码 - 开始
# 1、源码目录
├── benchmarks 性能、基准测试
├── dist 构建打包的输出目录
├── examples 案例目录
├── flow flow 语法的类型声明
├── packages 一些额外的包，比如：负责服务端渲染的包 vue-server-renderer、配合 vue-loader 使用的的 vue-template-compiler，还有 weex 相关的
│ ├── vue-server-renderer
│ ├── vue-template-compiler
│ ├── weex-template-compiler
│ └── weex-vue-framework
├── scripts 所有的配置文件的存放位置，比如 rollup 的配置文件
├── src vue 源码目录
│ ├── compiler 编译器
│ ├── core 运行时的核心包
│ │ ├── components 全局组件，比如 keep-alive
│ │ ├── config.js 一些默认配置项
│ │ ├── global-api 全局 API，比如熟悉的：Vue.use()、Vue.component() 等
│ │ ├── instance Vue 实例相关的，比如 Vue 构造函数就在这个目录下
│ │ ├── observer 响应式原理
│ │ ├── util 工具方法
│ │ └── vdom 虚拟 DOM 相关，比如熟悉的 patch 算法就在这儿
│ ├── platforms 平台相关的编译器代码
│ │ ├── web
│ │ └── weex
│ ├── server 服务端渲染相关
├── test 测试目录
├── types TS 类型声明
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
# 2、流程总图
# 3、流程总结
new Vue => this._init => 调用一些初始化方法，其中包含 initState 方法 => 进入响应式流程 => 初始化了一些方法，并使用 Object.defineProperty 劫持了 getter 和 setter 方法 => getter调用 dep.depend 收集依赖，setter 调用 dep.nottify 通知更新 => Dep.notify 调用 watcher.update，然后就进入了异步更新阶段 => 做了一些判断，最后会调用 nextTick 方法 => 再调用 timerFunc 方法，优先使用微任务，然后宏任务，Promise => MutationObserver => setImmediate => setTimeout，其意愿总是尽快执行 => 然后调用 watcher.run => watcher.get => 重置调度状态。
挂载阶段：进入挂载阶段会调用 beforeMount 钩子 => new Watcher => 回调 updateComponent 方法 => 继续调用 _update() => 然后进入 __patch__阶段，也就是VNode节点的创建以及更新 => 经过一些逻辑处理，最终调用 patchVnode 方法更新节点 => 然后判断新旧节点是否存在子节点 => 进入 diff 过程
# 4、参考
https://juejin.cn/post/6949370458793836580