上一篇：Vue2.x 源码 - 初始化：initMixin(Vue)

这一篇主要看一下 stateMixin、eventsMixin、lifecycleMixin、renderMixin 这四个混入。

这些主要是往 Vue 实例的原型（prototype）上挂载一些方法：

1、stateMixin：数据相关 $data、$props、$set、$del、$watch
2、eventsMixin：事件 $on、$off、$once、$emit
3、lifecycleMixin：组件、实例更新 _update、$forceUpdate，生命周期 $destroy
4、renderMixin：简写的渲染工具函数 installRenderHelpers ，组件渲染 $nextTick 、_render

一、stateMixin(Vue)

在 src/core/instance/state.js 文件里面

export function stateMixin (Vue: Class<Component>) {//用dataDef、propsDef的get方法来获取实例上的 data 、propsconst dataDef = {}dataDef.get = function () { return this._data }const propsDef = {}propsDef.get = function () { return this._props }//开发环境设置set方法抛出警告信息if (process.env.NODE_ENV !== 'production') {dataDef.set = function () {warn('Avoid replacing instance root $data. ' +'Use nested data properties instead.',this)}propsDef.set = function () {warn(`$props is readonly.`, this)}}//响应式绑定data、props到 $data、$props上，Object.defineProperty(Vue.prototype, '$data', dataDef)Object.defineProperty(Vue.prototype, '$props', propsDef)//设置 $set $deleteVue.prototype.$set = setVue.prototype.$delete = delVue.prototype.$watch = function (expOrFn: string | Function,cb: any,options?: Object): Function {const vm: Component = thisif (isPlainObject(cb)) {return createWatcher(vm, expOrFn, cb, options)}options = options || {}options.user = trueconst watcher = new Watcher(vm, expOrFn, cb, options)if (options.immediate) {try {cb.call(vm, watcher.value)} catch (error) {handleError(error, vm, `callback for immediate watcher "${watcher.expression}"`)}}return function unwatchFn () {watcher.teardown()}}
}

首先定义 dataDef 和 propsDef，用来设置响应式 $data 和 $props的get和set方法；然后在实例上添加 $set、$delete、$watch方法；

注意：实例根$data不可被替换；props是只读的，不可修改。

let obj = {a:1
}
this.$data = obj /// 这种对$data直接赋值会导致警告（对象的拷贝默认是深拷贝即引用）

watch
watch 方法主要是创建 watcher 对象，这里涉及响应式原理；为了方便，这里我把 $watch 部分代码单独拿出来

//设置 $watchVue.prototype.$watch = function (expOrFn: string | Function, //用户手动监听cb: any, //监听变化之后的回调函数options?: Object //参数): Function {const vm: Component = this//如果cb是对象执行createWatcher，获取cb 对象里面的handler属性继续递归执行 $watch，直到cb不是对象if (isPlainObject(cb)) {return createWatcher(vm, expOrFn, cb, options)}options = options || {}//标记为用户 watcher，用于给data从新赋值时走watch的监听函数options.user = true//为expOrFn添加watcherconst watcher = new Watcher(vm, expOrFn, cb, options)//immediate==true 立即执行cb回调if (options.immediate) {try {cb.call(vm, watcher.value)} catch (error) {handleError(error, vm, `callback for immediate watcher "${watcher.expression}"`)}}//取消观察函数return function unwatchFn () {//从所有依赖项的订阅者列表中删除当前watcherwatcher.teardown()}}
function createWatcher (vm: Component,expOrFn: string | Function,handler: any,options?: Object
) {if (isPlainObject(handler)) {options = handlerhandler = handler.handler}if (typeof handler === 'string') {handler = vm[handler]}return vm.$watch(expOrFn, handler, options)
}

createWatcher 判断 handler 是否是对象，是则将 handler 挂载到 options 上，不是则将对象的 handler 属性取出来；如果 handler 是字符串，则从 vm 上找到 handler 来赋值；最后执行 实例上的 $watch 方法；

watch里面涉及的 Watcher 后面会详细说明，这里就不细说了。

set、del
set 和 del 方法在 src/core/observer/index 文件里面

export function set (target: Array<any> | Object, key: any, val: any): any {//开发环境、是否未定义、是否是原始对象if (process.env.NODE_ENV !== 'production' &&(isUndef(target) || isPrimitive(target))) {warn(`Cannot set reactive property on undefined, null, or primitive value: ${(target: any)}`)}//target是不是数组，key是不是有效的数组索引if (Array.isArray(target) && isValidArrayIndex(key)) {//对比key和target.length来重新赋值数组长度target.length = Math.max(target.length, key)//替换key位置的值target.splice(key, 1, val)return val}//如果key已经存在target里面或key属于Object的原生属性，那么直接赋值if (key in target && !(key in Object.prototype)) {target[key] = valreturn val}//避免在运行时向Vue实例或其根$data添加响应性属性——在data选项中预先声明它//获取observe实例，可参考Observe实例对象const ob = (target: any).__ob__//isVue为true说明target是Vue实例//vmCount属性存在说明是根$dataif (target._isVue || (ob && ob.vmCount)) {process.env.NODE_ENV !== 'production' && warn('Avoid adding reactive properties to a Vue instance or its root $data ' +'at runtime - declare it upfront in the data option.')return val}if (!ob) {target[key] = valreturn val}//添加成响应式属性，并通知数据更新defineReactive(ob.value, key, val)ob.dep.notify()return val
}

set 的作用是向 target 上响应式添加 key 属性名的 val 属性值；

export function del (target: Array<any> | Object, key: any) {//开发环境、是否未定义、是否是原始对象if (process.env.NODE_ENV !== 'production' &&(isUndef(target) || isPrimitive(target))) {warn(`Cannot delete reactive property on undefined, null, or primitive value: ${(target: any)}`)}//target是不是数组，key是不是有效的数组索引if (Array.isArray(target) && isValidArrayIndex(key)) {//直接删除key位置的值target.splice(key, 1)return}//避免删除Vue实例上的属性，或者将其根$data设置为空即可const ob = (target: any).__ob__if (target._isVue || (ob && ob.vmCount)) {process.env.NODE_ENV !== 'production' && warn('Avoid deleting properties on a Vue instance or its root $data ' +'- just set it to null.')return}//如果target里面没有key这个属性直接返回if (!hasOwn(target, key)) {return}//delete 属性，并通知数据更新delete target[key]if (!ob) {return}ob.dep.notify()
}

del 方法是删除 target 对象上的 key 属性名的属性。

set 、del 方法不能操作 Vue 实例对象上的属性和根数据对象（$data）的属性。

二、eventsMixin(Vue)

在 src/core/instance/events.js 文件里面

export function eventsMixin (Vue: Class<Component>) {const hookRE = /^hook:///一个发布订阅关系中，一个充当订阅的角色Vue.prototype.$on = function (event: string | Array<string>, fn: Function): Component {const vm: Component = this//事件是数组，循环调用 $on 方法，一直到发现 event 不是数组为止if (Array.isArray(event)) {for (let i = 0, l = event.length; i < l; i++) {vm.$on(event[i], fn)}} else {//检查 vue 的构造函数下的 _events 对象是否存在当前的事件//不存在就创建一个数组，存在的话，把订阅的回调 fn 添加到 _events 的当前事件属性的数组当中(vm._events[event] || (vm._events[event] = [])).push(fn)// 检查当前的事件是否是以 hook: 开头的事件，如果是的话，就设置当前 vue 的 _hasHookEvent 的状态为 trueif (hookRE.test(event)) {vm._hasHookEvent = true}}return vm}//用来监听一个自定义事件，但是只触发一次，在第一次触发之后移除监听器Vue.prototype.$once = function (event: string, fn: Function): Component {const vm: Component = this//内部提供一个on方法，function on () {//调用 $off 移除了事件监听器vm.$off(event, on)//fn的this指向vmfn.apply(vm, arguments)}//$on 里面用 on 替换了传入的参数fn，用户手动卸载的的时候触发 vm.$off('xxx',fn) 就找不到 fn事件，这里将 fn 传入 on.fn；//$off内部会判断如果回调函数列表中某一项的fn属性与fn相同时，就可以成功移除事件了on.fn = fn//执行on方法vm.$on(event, on)return vm}
//移除自定义事件监听器Vue.prototype.$off = function (event?: string | Array<string>, fn?: Function): Component {const vm: Component = this// 不接收任何参数的时候，代表要把 vue 构造函数内的所有事件监听器全部卸载if (!arguments.length) {vm._events = Object.create(null)return vm}// 事件是数组，则循环调用$offif (Array.isArray(event)) {for (let i = 0, l = event.length; i < l; i++) {vm.$off(event[i], fn)}return vm}// 当前的事件不存在，就直接返回const cbs = vm._events[event]if (!cbs) {return vm}//不存在回调函数的话，直接把当前事件给移除if (!fn) {vm._events[event] = nullreturn vm}// 存在回调的话，检查当前的订阅数组，删除当前回调函数，并退出let cblet i = cbs.lengthwhile (i--) {cb = cbs[i]if (cb === fn || cb.fn === fn) {cbs.splice(i, 1)break}}return vm}//一个发布订阅关系中，一个充当发布的角色Vue.prototype.$emit = function (event: string): Component {const vm: Component = thisif (process.env.NODE_ENV !== 'production') {const lowerCaseEvent = event.toLowerCase()//检查事件的命名是否有问题（不能使用v-on监听驼峰事件、是不是实例上已存在）if (lowerCaseEvent !== event && vm._events[lowerCaseEvent]) {tip(`Event "${lowerCaseEvent}" is emitted in component ` +`${formatComponentName(vm)} but the handler is registered for "${event}". ` +`Note that HTML attributes are case-insensitive and you cannot use ` +`v-on to listen to camelCase events when using in-DOM templates. ` +`You should probably use "${hyphenate(event)}" instead of "${event}".`)}}let cbs = vm._events[event]//当前的要发布的事件，存在回调，就依次发布事件到订阅的事件里面if (cbs) {cbs = cbs.length > 1 ? toArray(cbs) : cbsconst args = toArray(arguments, 1)const info = `event handler for "${event}"`for (let i = 0, l = cbs.length; i < l; i++) {invokeWithErrorHandling(cbs[i], vm, args, vm, info)}}return vm}
}
//src/core/util/error.js
export function invokeWithErrorHandling (handler: Function,context: any,args: null | any[],vm: any,info: string
) {let restry {//事件回调函数绑定到 vm 上res = args ? handler.apply(context, args) : handler.call(context)if (res && !res._isVue && isPromise(res) && !res._handled) {res.catch(e => handleError(e, vm, info + ` (Promise/async)`))// 避免在嵌套调用时多次触发捕获res._handled = true}} catch (e) {handleError(e, vm, info)}return res
}

on 事件订阅事件，emit 触发事件，off 删除事件，once 本质也是 on 事件，但是 once 只能触发一次。

三、lifecycleMixin(Vue)

在 src/core/instance/lifecycle.js 文件里面

export function lifecycleMixin (Vue: Class<Component>) {//_update 方法用来更新组件内容、也是 patch 的入口Vue.prototype._update = function (vnode: VNode, hydrating?: boolean) {const vm: Component = this//缓存更新之前元素的 $el 和 _vnodeconst prevEl = vm.$elconst prevVnode = vm._vnode//当前的实例设置为活跃实例const restoreActiveInstance = setActiveInstance(vm)//传入最新的vnodevm._vnode = vnode// prevVnode不存在说明是第一次渲染// __patch__主要是将vnode转换成dom，渲染在视图中if (!prevVnode) {// 最初次渲染vm.$el = vm.__patch__(vm.$el, vnode, hydrating, false /* removeOnly */)} else {// 再次渲染（更新）vm.$el = vm.__patch__(prevVnode, vnode)}//调用return里面的方法返回原来的活跃实例restoreActiveInstance()// 之前的el添加 _vue_属性并设置为nullif (prevEl) {prevEl.__vue__ = null}//__vue__ 指向更新时接收到的 vue 实例if (vm.$el) {vm.$el.__vue__ = vm}// 如果当前实例的父级 $parent 是 高阶组件，那么也更新其 $elif (vm.$vnode && vm.$parent && vm.$vnode === vm.$parent._vnode) {vm.$parent.$el = vm.$el}}// $forceUpdate 方法， 调用实例的 _watcher，强制更新一遍、触发updated生命周期Vue.prototype.$forceUpdate = function () {const vm: Component = thisif (vm._watcher) {vm._watcher.update()}}//完全销毁一个实例。清理它与其它实例的连接，解绑它的全部指令及事件监听器//触发beforeDestroy和destroyed生命周期Vue.prototype.$destroy = function () {const vm: Component = this//如果已经开始则中断，避免重复销毁if (vm._isBeingDestroyed) {return}callHook(vm, 'beforeDestroy')vm._isBeingDestroyed = true// 将当前对象从父节点移除const parent = vm.$parentif (parent && !parent._isBeingDestroyed && !vm.$options.abstract) {remove(parent.$children, vm)}// 卸载当前实例上的 watcher 对象if (vm._watcher) {vm._watcher.teardown()}let i = vm._watchers.lengthwhile (i--) {vm._watchers[i].teardown()}// 从冻结对象中移除引用可能没有观察者if (vm._data.__ob__) {vm._data.__ob__.vmCount--}vm._isDestroyed = true// 在当前呈现的树上调用销毁钩子vm.__patch__(vm._vnode, null)callHook(vm, 'destroyed')// 关闭所有实例侦听器vm.$off()// 相关属性都设置未nullif (vm.$el) {vm.$el.__vue__ = null}if (vm.$vnode) {vm.$vnode.parent = null}}
}

_update 主要是使用 __patch__ 方法传入不同的参数来实现渲染和更新的；这里用到 setActiveInstance 方法，主要用于缓存上一次的实例对象并返回当前的实例对象，__patch__ 完之后重新返回上一个实例对象，一般用于组件直接的嵌套。

四、renderMixin(Vue)

在 src/core/instance/render.js 文件里面

export function renderMixin (Vue: Class<Component>) {// 在实例上挂载简写的渲染工具函数，这些都是运行时代码installRenderHelpers(Vue.prototype)//将回调延迟到下次 DOM 更新循环之后执行Vue.prototype.$nextTick = function (fn: Function) {return nextTick(fn, this)}//执行render函数生成vnode，以及异常处理Vue.prototype._render = function (): VNode {const vm: Component = thisconst { render, _parentVnode } = vm.$options//创建子组件的 vnode 执行normalizeScopedSlotsif (_parentVnode) {vm.$scopedSlots = normalizeScopedSlots(_parentVnode.data.scopedSlots,vm.$slots,vm.$scopedSlots)}// 设置父vnodevm.$vnode = _parentVnode// render selflet vnodetry {currentRenderingInstance = vm// 执行 render 函数，生成 vnodevnode = render.call(vm._renderProxy, vm.$createElement)} catch (e) {handleError(e, vm, `render`)// render函数出错// 开发环境渲染错误信息，生产环境返回之前的 vnode，以防止渲染错误导致组件空白if (process.env.NODE_ENV !== 'production' && vm.$options.renderError) {try {vnode = vm.$options.renderError.call(vm._renderProxy, vm.$createElement, e)} catch (e) {handleError(e, vm, `renderError`)vnode = vm._vnode}} else {vnode = vm._vnode}} finally {currentRenderingInstance = null}// 如果返回的数组只包含一个节点，转化一下if (Array.isArray(vnode) && vnode.length === 1) {vnode = vnode[0]}// 如果渲染函数出错，返回空vnodeif (!(vnode instanceof VNode)) {if (process.env.NODE_ENV !== 'production' && Array.isArray(vnode)) {warn('Multiple root nodes returned from render function. Render function ' +'should return a single root node.',vm)}vnode = createEmptyVNode()}// 设置父节点vnode.parent = _parentVnodereturn vnode}
}

执行 render 函数生成 vnode，如果执行失败，则返回错误渲染结果，或以前的 vnode，以防止渲染错误导致空白组件；如果 render 函数生成的不是 Vnode，则返回空的 vnode；

这里主要负责生产 vnode，然后就是一些异常处理的方法。

createElement 方法在后面会细说，这里就不过多说明。

installRenderHelpers

export function installRenderHelpers (target: any) {target._o = markOncetarget._n = toNumbertarget._s = toStringtarget._l = renderListtarget._t = renderSlottarget._q = looseEqualtarget._i = looseIndexOftarget._m = renderStatictarget._f = resolveFiltertarget._k = checkKeyCodestarget._b = bindObjectPropstarget._v = createTextVNodetarget._e = createEmptyVNodetarget._u = resolveScopedSlotstarget._g = bindObjectListenerstarget._d = bindDynamicKeystarget._p = prependModifier
}

将常用的渲染工具函数的简写函数名挂载到 Vue.prototype 原型上。

nextTick
在src/core/util/next-tick.js 文件里面

const callbacks = []
let pending = false
export function nextTick (cb?: Function, ctx?: Object) {let _resolve// callback是上面定义的一个数组，存储下面方法callbacks.push(() => {// 回调函数存在则绑定到 vue实例上cb.call(ctx) 、_resolve(ctx)if (cb) {try {cb.call(ctx)} catch (e) {handleError(e, ctx, 'nextTick')}} else if (_resolve) {_resolve(ctx)}})//padding状态位if (!pending) {pending = truetimerFunc()}// 如果回调函数不存在，当前环境支持 Promise，则返回一个 Promise 对象，并赋值给 _resolveif (!cb && typeof Promise !== 'undefined') {return new Promise(resolve => {_resolve = resolve})}
}
let timerFunc
//当前环境是否支持promise
if (typeof Promise !== 'undefined' && isNative(Promise)) {const p = Promise.resolve()timerFunc = () => {p.then(flushCallbacks)// 设置空计数器，强制刷新微任务队列if (isIOS) setTimeout(noop)}isUsingMicroTask = true
} else if (!isIE && typeof MutationObserver !== 'undefined' && (isNative(MutationObserver) ||// PhantomJS and iOS 7.xMutationObserver.toString() === '[object MutationObserverConstructor]'
)) {// 在原生Promise不可用的地方使用MutationObserverlet counter = 1const observer = new MutationObserver(flushCallbacks)const textNode = document.createTextNode(String(counter))observer.observe(textNode, {characterData: true})timerFunc = () => {counter = (counter + 1) % 2textNode.data = String(counter)}isUsingMicroTask = true
} else if (typeof setImmediate !== 'undefined' && isNative(setImmediate)) {timerFunc = () => {setImmediate(flushCallbacks)}
} else {timerFunc = () => {setTimeout(flushCallbacks, 0)}
}
// 将padding标志位置空，数据缓存到copies里面，清空callbacks数组，遍历执行每一个方法
function flushCallbacks () {pending = falseconst copies = callbacks.slice(0)callbacks.length = 0for (let i = 0; i < copies.length; i++) {copies[i]()}
}

将回调函数缓存在 callbacks 数组里面，然后 调用 timerFunc 方法，timerFunc 会根据不同环境通过不同的手段调用 flushCallbacks 方法来执行每一个缓存在 callbacks 里面的方法。

nextTick的核心思路就是通过异步方法来处理任务；vue 会根据当前环境优先使用 promise.then、MutationObserver 、setImmediate，如果都不支持就使用 setTimeout 把函数延迟到 DOM 更新之后再使用。（原因是宏任务消耗大于微任务，优先使用微任务，最后使用消耗最大的宏任务）