vue源码学习笔记
Vue的本质
Vue的本质就是用一个Function实现的Class，然后在它的原型prototype和本身上面扩展一些属性和方法。
它的定义是在src/core/instance/index.js里面定义
使用ES5的方式，即用函数来实现一个class，不用ES6来实现class的原因：在ES5中，是可以往Vue的原型上挂很多方法，并且可以将不同的原型方法拆分到不同的文件下，这样方便代码的管理，不用再单个文件上把Vue的原型方法都定义一遍
Vue中的全局方法定义在src/core/global-api里面：定义Vue的全局配置
一：数据驱动
Vue.js 一个核心思想是数据驱动。所谓数据驱动，是指视图是由数据驱动生成的，对视图的修改，不会直接操作 DOM，而是通过修改数据。它相比我们传统的前端开发，如使用 jQuery 等前端库直接修改 DOM，大大简化了代码量。特别是当交互复杂的时候，只关心数据的修改会让代码的逻辑变的非常清晰，因为 DOM 变成了数据的映射，我们所有的逻辑都是对数据的修改，而不用碰触 DOM，这样的代码非常利于维护
可以采用简洁的模板语法来声明式的将数据渲染为 DOM
数据驱动的两个核心思想：模板和数据是如何渲染成最终的DOM；数据更新驱动视图变化
问题：vue中模板和数据如何渲染成最终的DOM？？？？
2、new Vue()发生了什么？
1）new关键字实例化一个对象，Vue()是一个类，在js中类用Function定义
2）在Vue()函数中调用初始化函数：Vue 初始化主要就干了几件事情，合并配置，初始化生命周期，初始化事件中心，初始化渲染，初始化data、props、computed、watcher 等等。Vue 的初始化逻辑写的非常清楚，把不同的功能逻辑拆成一些单独的函数执行，让主线逻辑一目了然
3）在初始化的最后，检测到如果有 el 属性，则调用 vm.$mount 方法挂载 vm，挂载的目标就是把模板渲染成最终的 DOM
分析 Vue 的挂载过程
在vue的项目中去调试vue源码，如下图所示：
import Vue from 'vue'
var vue = new Vue({
el: "#app", data() { return { message: 'hello' } }})
vue的定义是在node_modules下面定义的，在vue文件夹下面的package.json下面定义了如下内容：
"main": "dist/vue.runtime.esm.js",
"module": "dist/vue.runtime.esm.js"如果项目用vue-cli构建的话，那么vue的引进其实是在build/webpack.base.conf.js中进行配置的
resolve: {
extensions: ['.js', '.vue', '.json'],
alias: {
'vue$': 'vue/distue.esm.js', //完整的写法：node_modules/vue/dist/vue.esm.js
'@': resolve('src'),
'common':resolve('src/common'),
'components':resolve('src/components')
}
}即：
import Vue from 'vue' 就相当于import Vue from 'node_modules/vue/dist/vue.esm.js'那调用initMixin()方法时，就是调用这个路径下的文件里面定义的方法，可以在里面添加debugger，然后就可以调试vue中的源码了
function initMixin (Vue) {
Vue.prototype._init = function (options) {
debugger
var vm = this;
// a uid
vm._uid = uid$3++;
var startTag, endTag;
/* istanbul ignore if */
if (process.env.NODE_ENV !== 'production' && config.performance && mark) {
startTag = "vue-perf-start:" + (vm._uid);
endTag = "vue-perf-end:" + (vm._uid);
mark(startTag);
}
// a flag to avoid this being observed
vm._isVue = true;
// merge options
if (options && options._isComponent) {
// optimize internal component instantiation
// since dynamic options merging is pretty slow, and none of the
// internal component options needs special treatment.
initInternalComponent(vm, options);
} else {
vm.$options = mergeOptions(
resolveConstructorOptions(vm.constructor),
options || {},
vm
);
}
/* istanbul ignore else */
if (process.env.NODE_ENV !== 'production') {
initProxy(vm);
} else {
vm._renderProxy = vm;
}
// expose real self
vm._self = vm;
initLifecycle(vm);
initEvents(vm);
initRender(vm);
callHook(vm, 'beforeCreate');
initInjections(vm); // resolve injections before data/props
initState(vm);
initProvide(vm); // resolve provide after data/props
callHook(vm, 'created');
/* istanbul ignore if */
if (process.env.NODE_ENV !== 'production' && config.performance && mark) {
vm._name = formatComponentName(vm, false);
mark(endTag);
measure(("vue " + (vm._name) + " init"), startTag, endTag);
}
//如果有设置Vue()实例，那么就挂载到该el对象上
if (vm.$options.el) {
vm.$mount(vm.$options.el);
}
};
}
在data()属性里面定义了变量之后，就可以通过this.变量名访问到在data()里面定义的变量，这是为什么呢？
通过在初始化函数中调用initState(vm)，然后调用初始化data的函数initData()，在里面将数据赋给vm_.data，然后通过proxy()将vm._data.key替换成vm.key，在proxy()中对vm._data.key设置setter getter，然后通过Object.defineProperty(target,key,sharedPropertyDefinition)来实现代理的
import Vue from 'vue'
var vue = new Vue({
el: "#app",
mounted: {
console.log(this.message) //相当于this._data_message,通过proxy做一层代理，主要应用Object.defineProperty()实现一个代理
},
data() {
return {
message: 'hello'
}
}
})在init.js文件中初始化函数中有一个initState(vm)，而这个函数是定义在state.js中
export function initState (vm: Component) {
vm._watchers = []
const opts = vm.$options
if (opts.props) initProps(vm, opts.props)
if (opts.methods) initMethods(vm, opts.methods)
//如果定义了data，就初始化data
if (opts.data) {
initData(vm)
} else {
observe(vm._data = {}, true /* asRootData */)
}
if (opts.computed) initComputed(vm, opts.computed)
if (opts.watch && opts.watch !== nativeWatch) {
initWatch(vm, opts.watch)
}
}initData()函数定义如下：
function initData (vm: Component) {
let data = vm.$options.data //在Vue()中的data()中定义的对象
data = vm._data = typeof data === 'function' // data = vm._data
? getData(data, vm) //从vm中拿到data getData(data, vm)
: data || {}
//如果data不是一个函数，那么就在浏览器报一个警告
if (!isPlainObject(data)) {
data = {}
process.env.NODE_ENV !== 'production' && warn(
'data functions should return an object:\n' +
'https://vuejs.org/v2/guide/components.html#data-Must-Be-a-Function',
vm
)
}
// proxy data on instance
const keys = Object.keys(data)
const props = vm.$options.props
const methods = vm.$options.methods
let i = keys.length
while (i--) {
const key = keys[i]
if (process.env.NODE_ENV !== 'production') {
//methods和data中不能有同名的属性变量,有的话就报警告
if (methods && hasOwn(methods, key)) {
warn(
`Method "${key}" has already been defined as a data property.`,
vm
)
}
}
//props和data中不能有同名的属性变量,有的话就报警告
if (props && hasOwn(props, key)) {
process.env.NODE_ENV !== 'production' && warn(
`The data property "${key}" is already declared as a prop. ` +
`Use prop default value instead.`,
vm
)
} else if (!isReserved(key)) {
//如果没有同名的话，那就通过proxy()函数进行一个代理
//vm实例对象，在_data对象上的key添加getter setter
proxy(vm, `_data`, key)
}
}
// observe data 初始化的时候对data做了一个响应式的处理
observe(data, true /* asRootData */)
}
3、Vue实例挂载的实现，也就是执行vm.$mount()做了哪些事情
用的是runtime+compiler的版本，所以入口在entre-runtime-with-compiler.js
Vue中是通过$mount实例方法去挂载vm的
$mount方法定义在Vue的原型上：Vue.prototype.$mount
1）首先缓存了原型上的 $mount 方法
2）重新定义该方法
a) 它对 el 做了限制，Vue 不能挂载在 body、html 这样的根节点上
b) 很关键的逻辑 —— 如果没有定义 render 方法，则会把 el 或者 template 字符串转换成 render 方法。这里我们要牢记，在 Vue 2.0 版本中，所有 Vue 的组件的渲染最终都需要 render 方法，无论我们是用单文件 .vue 方式开发组件，还是写了 el 或者 template 属性，最终都会转换成 render 方法，那么这个过程是 Vue 的一个“在线编译”的过程，它是调用 compileToFunctions 方法实现的
3) 最后，调用原先原型上的 $mount 方法挂载
原先原型上的 $mount 方法在 src/platform/web/runtime/index.js 中定义，之所以这么设计完全是为了复用，因为它是可以被 runtime only 版本的 Vue 直接使用的
原先原型上的方法$mount会调用mountComponent()，定义在src/core/instance/lifecycle.js
mountComponent ()核心
a) 先调用 vm._render 方法生成VNode
b) 再实例化一个渲染Watcher，在它的回调函数中会调用 updateComponent 方法，最终调用 vm._update 更新 DOM
c) 最后判断为根节点时，设置 vm._isMounted 为 true（表示这个实例已经挂载了），同时执行 mounted 钩子函数。 这里注意 vm.$vnode 表示 Vue 实例的父虚拟 Node，所以它为 Null 则表示当前是根 Vue 的实例。
Watcher的作用
a) 初始化的时候执行回调函数
b) 当 vm 实例中，监测的数据发生变化的时候执行回调函数
mountComponent()方法中的vm._reneder()---创建VNode和vm._update()---将VNode挂载到DOM上
（1）vm._render()：定义在Vue.prototype._render上---把实例渲染成一个虚拟 Node
vm._render() 最终是通过执行 createElement 方法，然后返回 vnode
Virtual DOM：用VNode类描述
用一个原生的 JS 对象去描述一个 DOM 节点，所以它比创建一个 DOM 的代价要小很多。在 Vue.js 中，Virtual DOM 是用 VNode 这么一个 Class 去描述，它是定义在 src/core/vdom/vnode.js 中的
VNode 是对真实 DOM 的一种抽象描述，它的核心定义无非就几个关键属性，标签名、数据、子节点、键值等，其它属性都是用来扩展 VNode 的灵活性以及实现一些特殊 feature 的。由于 VNode 只是用来映射到真实 DOM 的渲染，不需要包含操作 DOM 的方法，因此它是非常轻量和简单的
Virtual DOM映射到真实的DOM上要经历过VNode的create diff patch等过程，Vnode的create是通过createElement()方法创建的
createElement()创建Vnode
定义在'src/core/vdom/create-elemenet.js'
createElement 方法实际上是对 _createElement 方法的封装，它允许传入的参数更加灵活，在处理这些参数后，调用真正创建 VNode 的函数 _createElement
createElement 函数的流程略微有点多—— 这里主要介绍children 的规范化以及 VNode 的创建
children 的规范化：children 变成了一个类型为 VNode 的 Array
由于 Virtual DOM 实际上是一个树状结构，每一个 VNode 可能会有若干个子节点，这些子节点应该也是 VNode 的类型。_createElement 接收的第 4 个参数 children 是任意类型的，因此我们需要把它们规范成 VNode 类型
根据normalizationType 的不同，调用了 normalizeChildren(children) 和 simpleNormalizeChildren(children) 方法，
这两个方法在src/core/vdom/helpers/normalzie-children.js定义
1）simpleNormalizeChildren ：调用场景是 render 函数是编译生成的。理论上编译生成的 children 都已经是 VNode 类型的，但这里有一个例外，就是 functional component 函数式组件返回的是一个数组而不是一个根节点，所以会通过 Array.prototype.concat 方法把整个 children 数组打平，让它的深度只有一层
2）normalizeChildren ：调用场景有 2 种
一个场景是 render 函数是用户手写的，当 children 只有一个节点的时候，Vue.js 从接口层面允许用户把 children 写成基础类型用来创建单个简单的文本节点，这种情况会调用 createTextVNode 创建一个文本节点的 VNode
另一个场景是当编译 slot、v-for 的时候会产生嵌套数组的情况，会调用 normalizeArrayChildren 方法
normalizeArrayChildren 接收 2 个参数，children 表示要规范的子节点，nestedIndex 表示嵌套的索引，因为单个 child 可能是一个数组类型
normalizeArrayChildren 主要的逻辑就是遍历 children，获得单个节点 c，然后对 c 的类型判断：
1）如果是一个数组类型，则递归调用 normalizeArrayChildren;
2）如果是基础类型，则通过 createTextVNode 方法转换成 VNode 类型；否则就已经是 VNode 类型
3）如果 children 是一个列表并且列表还存在嵌套的情况，则根据 nestedIndex 去更新它的 key。这里需要注意一点，在遍历的过程中，对这 3 种情况都做了如下处理：如果存在两个连续的 text节点，会把它们合并成一个 text 节点。
在createElement函数中，规范化children之后，就会创建一个VNode的实例
这里先对 tag 做判断
1）如果是 string 类型，则接着判断
a）如果是内置的一些节点，则直接创建一个普通 VNode
b）如果是为已注册的组件名，则通过 createComponent 创建一个组件类型的 VNode，否则创建一个未知的标签的 VNode。2）如果是 tag 一个 Component 类型，则直接调用 createComponent 创建一个组件类型的 VNode 节点
（2）vm._update()：调用的时机有两个----首次渲染和数据更新（响应式原理）
作用：把VNode渲染成真实的DOM，定义在---src/core/instance/lifecycle.js
_update 的核心：调用 vm.__patch__ 方法，这个方法实际上在不同的平台，比如 web 和 weex 上的定义是不一样的，因此在 web 平台中它的定义在 src/platforms/web/runtime/index.js
Vue.prototype.__patch__ = inBrowser ? patch : noop
可以看到，甚至在 web 平台上，是否是服务端渲染也会对这个方法产生影响。因为在服务端渲染中，没有真实的浏览器 DOM 环境，所以不需要把 VNode 最终转换成 DOM，因此是一个空函数，而在浏览器端渲染中，它指向了 patch 方法，它的定义在 src/platforms/web/runtime/patch.js中
createPatchFunction 内部定义了一系列的辅助方法，最终返回了一个 patch 方法，这个方法就赋值给了 vm._update 函数里调用的 vm.__patch__
patch 是平台相关的，在 Web 和 Weex 环境，它们把虚拟 DOM 映射到 “平台 DOM” 的方法是不同的，并且对 “DOM” 包括的属性模块创建和更新也不尽相同。因此每个平台都有各自的 nodeOps 和 modules，它们的代码需要托管在 src/platforms 这个大目录下
不同平台的 patch 的主要逻辑部分是相同的，所以这部分公共的部分托管在 core 这个大目录下，差异化部分只需要通过参数来区别，这里用到了一个函数柯里化的技巧，通过 createPatchFunction 把差异化参数提前固化，这样不用每次调用 patch 的时候都传递 nodeOps 和 modules 了，这种编程技巧也非常值得学习。
nodeOps 表示对 “平台 DOM” 的一些操作方法，modules 表示平台的一些模块，它们会在整个 patch 过程的不同阶段执行相应的钩子函数
patch() 方法本身，它接收 4个参数
oldVnode 表示旧的 VNode 节点，它也可以不存在或者是一个 DOM 对象
vnode 表示执行 _render 后返回的 VNode 的节点
hydrating 表示是否是服务端渲染
removeOnly 是给 transition-group 用的
在 vm._update 的方法里是这么调用 patch 方法
vm.$el = vm.__patch__(vm.$el, vnode, hydrating, false /* removeOnly */)hydrating 在非服务端渲染情况下为 false，removeOnly 为 false
由于我们传入的 oldVnode 实际上是一个 DOM container，所以 isRealElement 为 true，接下来又通过 emptyNodeAt 方法把 oldVnode 转换成 VNode 对象，然后再调用 createElm 方法
createElm 的作用：通过虚拟节点创建真实的 DOM 并插入到它的父节点中
createElm 关键逻辑：createComponent 方法目的是尝试创建子组件，在当前这个 case 下它的返回值为 false
接下来判断 vnode 是否包含 tag，如果包含，先简单对 tag 的合法性在非生产环境下做校验，看是否是一个合法标签
然后再去调用平台 DOM 的操作去创建一个占位符元素
调用 createChildren 方法去创建子元素，逻辑如下：
遍历子虚拟节点，递归调用 createElm，这是一种常用的深度优先的遍历算法，这里要注意的一点是在遍历过程中会把 vnode.elm 作为父容器的 DOM 节点占位符传入
接着再调用 invokeCreateHooks 方法执行所有的 create 的钩子，并把 vnode push 到 insertedVnodeQueue 中
最后调用 insert 方法把 DOM 插入到父节点中，因为是递归调用，子元素会优先调用 insert，所以整个 vnode 树节点的插入顺序是先子后父。它的定义在 src/core/vdom/patch.js 上
insert 逻辑：调用一些 nodeOps 把子节点插入到父节点中，这些辅助方法定义在 src/platforms/web/runtime/node-ops.js 中
其实就是调用原生 DOM 的 API 进行 DOM 操作
在 createElm 过程中，如果 vnode 节点不包含 tag，则它有可能是一个注释或者纯文本节点，可以直接插入到父元素中
再回到 patch 方法，首次渲染我们调用了 createElm 方法，这里传入的 parentElm 是 oldVnode.elm 的父元素， 实际上整个过程就是递归创建了一个完整的 DOM 树并插入到 Body 上
最后，我们根据之前递归 createElm 生成的 vnode 插入顺序队列，执行相关的 insert 钩子函数
二：组件
组件化：把页面拆分成多个组件 (component)，每个组件依赖的 CSS、JavaScript、模板、图片等资源放在一起开发和维护。组件是资源独立的，组件在系统内部可复用，组件和组件之间可以嵌套
createElement ()最终会调用 _createElement()，其中有一段逻辑是对参数 tag 的判断，如果是一个普通的 html 标签，像上一章的例子那样是一个普通的 div，则会实例化一个普通 VNode 节点，否则通过 createComponent 方法创建一个组件 VNode
createComponent ：src/core/vdom/create-component.js
在createComponent()中针对组件渲染这个 case 主要就 3 个关键步骤：
构造子类构造函数、安装组件钩子函数、实例化 vnode
1、构造子类构造函数
在.vue文件中，export {}，即输出是一个对象，所以在createComponent()函数中会执行
baseCtor.extend(Ctor)baseCtor 实际上就是 Vue， src/core/global-api/index.js 中的 initGlobalAPI 函数
Vue.options._base = Vue这里是 Vue.option，而我们的 createComponent 取的是 context.$options，实际上在 src/core/instance/init.js 里 Vue 原型上的 _init 函数中有这么一段逻辑
vm.$options = mergeOptions(
resolveConstructorOptions(vm.constructor),
options || {},
vm
)
把 Vue 上的一些 option 扩展到了 vm.$option
mergeOptions()的作用：把 Vue 构造函数的 options 和用户传入的 options 做一层合并到 vm.$options 上
Vue.extend()：src/core/global-api/extend.js
作用：就是构造一个 Vue 的子类，使用原型继承的方式把一个纯对象转换一个继承于 Vue 的构造器 Sub 并返回
然后对 Sub 这个对象本身扩展一些属性，如扩展 options、添加全局 API 等
对配置中的 props 和 computed 做了初始化工作
最后对这个 Sub 构造函数做了缓存，避免多次执行 Vue.extend 的时候对同一个子组件重复构造
实例化 Sub 的时候，就会执行 this._init 逻辑再次走到了 Vue 实例的初始化逻辑
2、安装组件钩子函数
installComponentHooks(data)整个installComponentHooks 的过程就是把 componentVNodeHooks 的钩子函数合并到 data.hook 中
在 VNode 执行 patch 的过程中执行相关的钩子函数
在合并过程中，如果某个时机的钩子已经存在 data.hook 中，那么通过执行 mergeHook 函数做合并，这个逻辑很简单，就是在最终执行的时候，依次执行这两个钩子函数即可
3、实例化VNode
通过 new VNode 实例化一个 vnode 并返回
需要注意的是和普通元素节点的 vnode 不同，组件的 vnode 是没有 children 的
组件patch的过程：createComponent -> 子组件初始化 -> 子组件render -> 子组件patch
activeInstance为当前**的vm实例；vm.$vnode为组件的占位vnode；vm._vnode为组件的渲染vnode
嵌套组件的插入顺序是先子后父
通过 createComponent 创建了组件 VNode，接下来会走到 vm._update，执行 vm.__patch__ 去把 VNode 转换成真正的 DOM 节点。组件的 VNode 如何patch
patch 的过程会调用 createElm 创建元素节点，定义在src/core/vdom/patch.js
createComponent()
首先对 vnode.data 做了一些判断，如果vnode 是一个组件 VNode，那么条件会满足，并且得到 i 就是 init 钩子函数
init() 钩子函数，它是通过 createComponentInstanceForVnode 创建一个 Vue 的实例，然后调用 $mount 方法挂载子组件
createComponentInstanceForVnode()构造的一个内部组件的参数，然后执行 new vnode.componentOptions.Ctor(options)------是子组件的构造函数，它实际上是继承于 Vue 的一个构造器 Sub，相当于 new Sub(options) 这里有几个关键参数要注意几个点，_isComponent 为 true 表示它是一个组件，parent 表示当前**的组件实例
所以子组件的实例化实际上就是在这个时机执行的，并且它会执行实例的 _init 方法，代码在 src/core/instance/init.js 中
这里首先是合并 options 的过程有变化，_isComponent 为 true，所以走到了 initInternalComponent ()
initInternalComponent()这个过程我们重点记住以下几个点即可：opts.parent = options.parent、opts._parentVnode = parentVnode，把之前我们通过 createComponentInstanceForVnode 函数传入的几个参数合并到内部的选项 $options 里了
三、响应式原理
什么是响应式对象？响应式对象的创建过程？
Vue.js实现响应式的核心是利用ES5的Object.defineProperty(obj,prop,descriptor)，给对象的属性添加getter setter，返回这个对象
响应式对象的定义：如果对象的属性拥有了setter getter，就可以将该对象成为响应式的对象
在Vue中响应式对象有：props data computed watcher methods（如果子属性为对象，则递归的把该对象变成响应式的）
在生命周期钩子函数中定义的对象是不具有响应式的
什么是依赖收集？依赖收集的流程和目的
在访问对象的属性的时候，在get中会完成依赖的收集--收集当前正在计算的watcher作为订阅者