共计 8703 个字符，预计需要花费 22 分钟才能阅读完成。
学习目标
vue 源码分析（一）
- 掌握源码学习方法
- 初始化流程梳理
- 深入理解数据响应式过程
配置环境
- 首先拷贝源码：git clon https://github.com/vuejs/vue.git
- cd ./vue
- npm i
- 安装 rollup：打包工具
- 需要全局安装 npm i -g rollup
- 修改 /yuanma-vue/vue/package.json 中 dev 的脚本：添加 –sourcemap
- 执行 dev 脚本：npm run dev
- 在 examples 中去添加 test 文件
注：打完断点可以进行测试，源码运行流程
源码环境
"name": "vue",
"version": "2.6.11",文件目录
vue
├──dist #发布目录
├──examples #范例，测试代码在这里
├──flow #试代码
├──packages #核心代码之外的独立库
├──scripts #构建脚本
├──src #源码
├──test #ts 类型声明，上面 flow
└──types #对 flow 的类型声明 重点：源码
src # 源码
├──compiler # 编辑器相关
├──core # 核心代码
├──────components # 通用组建如 keep-alive
├──────global-api # 全局 API
├──────instance # 构建函数等
├──────observer # 响应式相关
├──────vdom # 虚拟 DOM 相关
└──────platforms # 平台独特的代码 代码扩充dist 中不同命名输出的解释
common：nodejs 打包的语言输出，服务端渲染。vue.common.dev.js
esm：版本是 webpack 打包用的版本 es6 的模块
umd：universal module definition(通用模块定义) 兼容 common 和 amd 用于浏览器；前端浏览器
加 runtime 含义的不同
添加指不包含编译器：体较小；仅包含运行时，（就不可以用字符串模版）运行时必须经过 webpack，因为 webpack 在程序运行之前，提前打包编译，所以会将 template，<p>{{foo}}</p> 等等都预编译成渲染函数，在 webpack 情况下，就不需要编译器
不添加指包含编译器
比如：当我们在
new Vue({template:'<div></div>' // 这种格式就需要 需要添加编译器 字符串模版})
<!-- <script src="../../dist/vue.js"></script> -->
// 什么没有没有加的，umd 格式 vue.jsvue 源码分析 - 初始化流程
入口文件：
路径：src/platforms/web/entry-runtime-with-compiler.js
// 首先获取到定义的 $mount 方法，并赋值给 mount；
//主要目的是要重写 $mount 方法；还需要执行之前的 mount 方法；
// 所以主要是扩展 $mount 方法
const mount = Vue.prototype.$mount
Vue.prototype.$mount = function (el?: string |Element, hydrating?: boolean): Component {
**1. 用户传进来的 el 宿主元素 **
**2. 处理选项：render/template/el**
const options = this.$options
if(!options.render){......}else if(el){.....} //** 都是在处理选项 **
从这里可以看出来，在 vue 处理 render/template/el 的时候的优先级。// 首选判断 render 是否存在
if (!options.render) { // 当 render 不存在的时候，才会进到里面的选项。// 如果 template 存在，再走 template 的 if 选项, 紧跟着是 else if
let template = options.template
if (template) {运行编译：将模板为 render 函数}else if (el) {}
从而可以得知 优先级为：render> template > el
}
}
扩展 $mount 的主要目的是：判断是否需要编译出渲染函数
在组件开发的情况下，会有一个 main.js
main.js
new vue({render(h){return h(App) // 编译根组建 App
}
}).$mount('#app')
render 需要配合 $mount 来使用
}
Vue.prototype.$mount 的来源
路径：src/platforms/web/entry-runtime-with-compiler.js 中
import Vue from ‘./runtime/index’ 路径 src/platforms/web/runtime/index.js 文件中，目录还是在 web 平台
web 平台运行时的首页需要实现的功能有哪些：**1\. 安装平台 patch 函数，主要是用于初始化和更新两个功能（虚拟 dom、diff）**
// install platform patch function
Vue.prototype.\_\_patch\_\_ = inBrowser ? patch : noop
**2. 实现 $mount 函数 **
Vue.prototype.$mount = function (...）{
el：宿主
**$mount 唯一做的一件事：挂载组建 就是将 vnode 转化为 node 可以理解为 vdome 转化为 dome**
return mountComponent(this, el, hydrating)
}
查找 vue 来源
初始化全局的 API
在 src/platforms/web/runtime/index.js 文件中，
import Vue from 'core/index'
Vue.prototype.$mount = function (）{}
路径：src/core/index.js
1. 初始化全局的 API
initGlobalAPI(Vue)
如：set delete nextTick .... 等等
具体的定义可以进到 initGlobalAPI 里来看，举例子：在 import {initUse} from './use' 中进入 initUse
可以看到 Vue.use 方法
Vue.use 方法，之前疑惑为什么要在，plugin 去定义 install 方法，从源码就可以看到约定的 install
if (typeof plugin.install === 'function') {.....}
在 src/core/index.js 中
import Vue from ‘./instance/index’
initGlobalAPI(Vue)
查找 vue 的引入
路径：/src/core/instance/index.js
这才是 Vue 实例，构造函数声明的位置
在这，构造函数
function Vue (options) {......
// 在这里面做了一件事，是初始化方法
this.\_init(options)
}
// 实现实例方法和属性
initMixin(Vue) // 这里做了一次混入，init 方法的声明 \_init()
stateMixin(Vue) // 和状态相关的实例方法 $set/$delete/$watch /.....
eventsMixin(Vue) // 和事件相关的方法 $on/$off/$once/$emit
lifecycleMixin(Vue) // 和生命周期相关的方法
renderMixin(Vue) // 渲染相关：声明和实现 $nextTick /\_render
initMixin(Vue) 声明_init
路径：src/core/instance/init.js
export function initMixin (Vue(将 vue 进行传入): Class<Component>) {.....
// \_init 做一个实例方法：\_init 用下划线的目的是，内部使用
Vue.prototype.\_init = function (options（传进来的选项）?: Object) {.....
初始化的核心代码在这里
// 选项的合并：vue 会有默认选项，和用户传进来的选项，进行合并，比如用户传进来的 el
if (options && options.\_isComponent) {.....} else {.....}
}
}stateMixin(Vue) // 和状态相关的实例方法 **
路径：src/core/instance/state.js
export function stateMixin (Vue: Class<Component>){.....
//$set
Vue.prototype.$set = set
//$del
Vue.prototype.$delete = del
//$watch
Vue.prototype.$watch = function (....){....}
}
lifecycleMixin(Vue) // 和生命周期相关的方法
路径：src/core/instance/lifecycle.js
export function lifecycleMixin (Vue: Class<Component>) {......
// 定义例如 \_update：更新 将虚拟 dome 转化为真实 dome；Vue.prototype.\_update = function (vnode: VNode, hydrating?: boolean) {}
.......
// 强制更行
Vue.prototype.**$forceUpdate**\= function () {
const vm: Component = this
if (vm.\_watcher) {
// 主要就是将所有的 watcher 更新一遍
vm.\_watcher.update()}
}
// 实例销毁
Vue.prototype.**$destroy**\= function () {} ..... 等等
}initMixin(Vue) 声明_init 里面完成的事情
nitLifecycle(vm) // $parent $root $children
initEvents(vm) // 事件监听
initRender(vm) // vm.$slots // vm.$createElement
// 在 beforeCreate 之前，上面的是一个初始准备
声明周期调用的统一方法是 callHook，这个方法
callHook(vm, 'beforeCreate') // 去派发注册事件，所以在 beforeCreate 中，是可以访问到上面三个内容的
initInjections(vm) // resolve injections before data/props
initState(vm) // 核心：数据初始化
// 为什么 Injections 会在 Provide 之前去注册？因为继承问题，Injec 可以拿到之前的祖辈的，之后在进行分发下去，这样，Provide 就可以拿到祖辈传过来了，以及在 state 里面注册的数据
initProvide(vm) // resolve provide after data/props
callHook(vm, 'created') // 所有数据相关的，都在 beforCreate 和 created 之间，上面三个内容，才会将数据变成响应式。initLifecycle(vm)
路径：src/core/instance/lifecycle.js
export function initLifecycle (vm: Component) {.....
初始化的时候，只有根组建和父组建
}
initEvents(vm)
路径：src/core/instance/events.js
export function initEvents (vm: Component（当前组建）) {vm.\_events = Object.create(null)
vm.\_hasHookEvent = false
// init parent attached events
// 事件处理 - 谁派发，谁监听；// vm.$options.\_parentListeners：从选项中拿到，在 parent（父级）中去声明的事件监听器
const listeners = vm.$options.\_parentListeners // 初始化父组件添加的事件
if (listeners) { // 如果父组建注册是事件存在，监听器存在
// 子组建就去注册事件
updateComponentListeners(vm, listeners)
}
}initRender(vm)
路径：src/core/instance/render.js
vm.$slots
vm.$createElement// 在 new Vue 中的“h”vue 源码分析 - 数据响应式
数据响应式是 MVVM 的特点，vue 数据双向绑定的原理：是利用了 JS 语 言特性 Object.defineProperty()，通过定义对象属性 setter 方法拦截对象属性变更，从而将数值的变化 转换为 UI 的变化。
具体实现是在 Vue 初始化时，会调用 initState，它会初始化 data，props 等
initState(vm)
路径：src/core/instance/state.js
export function initState (vm: Component) {.....
// 判断 data 是否存在
if (opts.data) { // 如果 data 存在，走这里，因为要看数据的双向绑定，所以找到 initData
initData(vm)
} else {observe(vm.\_data = {}, true /\* asRootData \*/)
}
}
当前目录下 -initData(vm)
function initData (vm: Component) {....
// 传进来的 data 可能是函数，或者对象，目的是防止数据污染；let data = vm.$options.data
data = vm.\_data = typeof data === 'function'
? getData(data, vm)
: data || {}
....
// 代理、重复判断
const keys = Object.keys(data)
while (i--) {....
// 属性和方法不能是重复的判断
if (process.env.NODE\_ENV !== 'production') {}
if (props && hasOwn(props, key)) {}}
// 对 data 数据响应式处理
observe(data, true /\* asRootData \*/)
}对 data 数据响应式处理
observe(data, true /* asRootData */) 路径：src/core/observer/index.js
export function observe (value: any, asRootData: ?boolean): Observer | void {....
// 为传进来的对象 value，创建一个 observer 实例；任何一个对象都伴随一个 observer 实例
// 返回一个 observer 实例
// 用 observer 实例，来判断类型 以及内部响应式处理
// 如果做过响应式，那么 \_ob\_ 存在，就直接返回
if (hasOwn(value, '\_\_ob\_\_') && value.\_\_ob\_\_ instanceof Observer) {ob = value.\_\_ob\_\_} else if (...）{...}else{...
// 如果未处理，就创建一个新的实例 ob 实例
ob = new Observer(value)
}
}new Observer(value)
路径：src/core/observer/index.js
export class Observer {constructor (value: any) {// 可以理解为小管家：比如在 data 中的数据是对象包对象的存在，data:{obj:{foo:foo}}, 对对象来说，是对对象新 增和删除的通知工作；由小管家来通知的。// 当需要修改 obj 里面的属性，是在肚子里发生的事情，所以需要小管家来进行处理
// 如果 obj 是一个数组，选项的删除也是需要小管家
// 对象属性变化或者数组元素变化需要小管家通知更新
this.dep = new Dep() // 小管家
// 判断传入的 value 类型，做相应的处理
if (Array.isArray(value)) { // 当是 Array 时的处理
// 覆盖数组实例的原型
}else{
// 对象的处理
this.walk(value)
}
}
walk (obj: Object) {....
const keys = Object.keys(obj)
// 遍历当前的所有 keys
for (let i = 0; i < keys.length; i++) {
// 对每个 key 进行拦截
defineReactive(obj, keys\[i\])
}
}
}defineReactive
export function defineReactive (
obj: Object,
key: string,
val: any,
customSetter?: ?Function,
shallow?: boolean
) {......
// 大管家 和 key 一对一的关系
const dep = new Dep()
// 用户自定义一些属性
const property = Object.getOwnPropertyDescriptor(obj, key)
..............
// 核心：递归，如果 val 是对象，则获取一个子 oberser 实例，一个对象就会有一个 observer 实例
let childOb = !shallow && observe(val)
// 做递归处理
Object.defineProperty(obj, key, {
enumerable: true,
configurable: true,
get: function reactiveGetter () {
// 依赖收集
const value = getter ? getter.call(obj) : val
// Dep.target 可以理解为 watcher 的实例，每次触发 watcher 实例的时候，会手动触发，get 事件一下获取当前 值，将实例放在 Dep.target 上；if (Dep.target) {// dep 和 watcher 是 n 对 n 的关系，除了页面渲染 {{name}} 会触发 watcher 以外；还有可能是 computed 或者 w atch 触发的事件监听；// 双向添加两者关系
dep.depend()
// 若存在子 ob
if (childOb) {
// 把当前的 watcher 和子 ob 中的 dep 建立关系
childOb.dep.depend()
if (Array.isArray(value)) {dependArray(value)
}
}
}
return value
},
set: function reactiveSetter (newVal) {}}
}dep.depend
路径：src/core/observer/dep.js
depend () {if (Dep.target) {
// 执行的是当前 watcher 的 addDep
Dep.target.addDep(this)
}
}Dep.target.addDep
找到 watcher 的 addDep 事件 路径：src/core/observer/watcher.js
addDep (dep: Dep) { //dep 和 wacter 相互保存的关系
const id = dep.id
if (!this.newDepIds.has(id)) { // 是否和当前的 dep 建立关系
// 没有就创建 dep 和 watcher 的关系
this.newDepIds.add(id)
this.newDeps.push(dep)
if (!this.depIds.has(id)) {
// 创建 dep 和 watcher
dep.addSub(this)
}
}
} dep.addSub
src/core/observer/dep.js
export default class Dep {
// 往自己的 sub 里面去 push
addSub (sub: Watcher) {this.subs.push(sub)
}
}学习资料：
思维导图 vue 源码解析（一）：https://www.processon.com/vie…
获取 vue 源码项目地址:https://github.com/vuejs/vue
迁出项目: git clone https://github.com/vuejs/vue.git
当前版本号:2.6.11
我写的主要是梳理，初始化流程和响应式过程的一个学习思路。如果有错误，欢迎补充。如果觉得在这里看文档不太清晰，可以去我写的思维导图的地址去看下。
接下来还会整理出源码的其他内容，尽情期待～～～拜拜
正文完