Vue源码学习（二）——从宏观看Vue

上一篇文章我们写到从入口文件一步步找到Vue的构造函数，现在我们要去看看Vue实例化经历的过程

Vue的构造函数

我们知道Vue的构造函数在src/core/instance/index.js中,不明白的可以去看上一篇文章 Vue源码学习笔记一。那我们关注一下Vue的构造函数的内容:

// src/core/instance/index.js
import { initMixin } from './init'
// Vue的构造函数
function Vue (options) {
//... 验证环境
this._init(options)
}
// 在Vue原型上绑定实例方法
initMixin(Vue) // init
stateMixin(Vue) // $set $delete $watch
eventsMixin(Vue) // $on $once $off $emit
lifecycleMixin(Vue) // _update $forceUpdate $destroy
renderMixin(Vue) // $nextTick _render

添加Vue属性和方法

这边我们可以看到Vue的构造函数中执行了init方法,从下方得知init是在src\core\instance\init.js中导出的initMixin函数中定义的

initMixin

1. vm即this ，同时为实例添加一个唯一的uid， vm._isVue = true 监听对象变化时用于过滤vm,因为Vue的实例是不需要监听变化的。

// src/core/instance/init.js
Vue.prototype._init = function (options?: Object) {
const vm: CompOnent= this
// 当前实例添加了一个唯一的uid
vm._uid = uid++
// ...
// 监听对象变化时用于过滤vm
vm._isVue = true
//...
}

1. 参数处理，根据我们的小栗子，我们的options处理直接进入了else，然后对参数进行合并，这里是对vue extend的参数需要进行合并处理，我们这里resolveConstructorOptions 返回的即是constructor.options本身
2. 生命周期相关变量初始化 initLifecycle(vm)

// src\core\instance\lifecycle.js
// 为组件挂载相应属性,并初始化
vm.$parent = parent
vm.$root = parent ? parent.$root : vm
vm.$children = []
vm.$refs = {}
vm._watcher = null
vm._inactive = null
vm._directInactive = false
vm._isMounted = false
vm._isDestroyed = false
vm._isBeingDestroyed = false

4.vm 事件监听初始化 initEvents()

// src/core/instance/events.js
export function initEvents (vm: Component) {
// 创建事件对象，用于存储事件
vm._events = Object.create(null)
// 系统事件标识位
vm._hasHookEvent = false
// init parent attached events npm
// 将父组件模板中注册的事件放到当前组件实例的listeners
const listeners = vm.$options._parentListeners
if (listeners) {
updateComponentListeners(vm, listeners)
}
}

initEvents(vm)
initRender(vm)
callHook(vm, 'beforeCreate')
initInjections(vm)
// vm状态初始化，prop/data/computed/method/watch都在这里初始化完成，vue实例create的关键
initState(vm)
initProvide(vm)
callHook(vm, 'created')

stateMixin

Vue实例方法&＃8211;数据，该文件对应的是Vue的数据的处理，首先对$data进行挂载，然后设置数据
$set、删除数据
$delete、观测数据
$watch方法挂载

// stateMixin(Vue) src/core/instance/state.js
export function stateMixin (Vue: Class) {
// data
const dataDef = {}
dataDef.get = function () { return this._data }
// prop
const propsDef = {}
propsDef.get = function () { return this._props }
// ...
// 定义$data & prop属性
Object.defineProperty(Vue.prototype, '$data', dataDef)
Object.defineProperty(Vue.prototype, '$props', propsDef)
// 原型链添加函数set 和 delete
Vue.prototype.$set = set
Vue.prototype.$delete = del
// 原型链添加函数$watch
Vue.prototype.$watch = function (){
// ...
}
}

eventsMixin

Vue实例方法&＃8211;事件,该文件主要挂载Vue实例方法的事件，监听事件
on once、移除事件
off、触发事件
emit的挂载

// eventsMixin(Vue) src/core/instance/events.js
export function eventsMixin (Vue: Class) {
Vue.prototype.$on = function (event: string, fn: Function): Component {
// ...
}
Vue.prototype.$Once= function (event: string, fn: Function): Component {
// ...
}
Vue.prototype.$off = function (event?: string, fn?: Function): Component {
// ...
}
Vue.prototype.$emit = function (event: string): Component {
// ...
}
}

lifecycleMixin

Vue实例方法&＃8211;生命周期，,该文件主要挂载Vue实例方法中的生命周期方法，重新渲染
$forceUpdate()、销毁实例
$destroy()

// lifecycleMixin(Vue) src/core/instance/lifecycle.js
Vue.prototype._mount = function(){}
Vue.prototype._update = function (vnode: VNode, hydrating?: boolean) {}
Vue.prototype._updateFromParent = function(){}
Vue.prototype.$forceUpdate = function () {}
Vue.prototype.$destroy = function () {}

renderMixin

文件主要挂载Vue实例方法中的dom更新回调
$nextTick及一些其他的render函数，后续我们再的深挖一下

// renderMixin(Vue) src/core/instance/render.js
Vue.prototype.$nextTick = function (fn: Function) {}
Vue.prototype._render = function (): VNode {}
Vue.prototype._s = _toString
Vue.prototype._v = createTextVNode
Vue.prototype._n = toNumber
Vue.prototype._e = createEmptyVNode
Vue.prototype._q = looseEqual
Vue.prototype._i = looseIndexOf
Vue.prototype._m = function(){}
Vue.prototype._o = function(){}
Vue.prototype._f = function resolveFilter (id) {}
Vue.prototype._l = function(){}
Vue.prototype._t = function(){}
Vue.prototype._b = function(){}
Vue.prototype._k = function(){}

全局API

上面部分，我们对Vue的构造函数，在
src/core/instance/index.js文件中的作用进行了大体的了解，当然这并没有结束，依据我们
Vue源码学习笔记一中提到的，我们追溯到上一级
src/core/index.js

// src/core/index.js
import Vue from './instance/index'
import { initGlobalAPI } from './global-api/index'
import { isServerRendering } from 'core/util/env'
import { FunctionalRenderContext } from 'core/vdom/create-functional-component'
// 初始化全局变量
initGlobalAPI(Vue)
// 为vue原型定义属性 isServer 判断是否为服务端渲染
Object.defineProperty(Vue.prototype, '$isServer', {
get: isServerRendering
})
// 为vue原型定义属性 ssrContext
Object.defineProperty(Vue.prototype, '$ssrContext', {
get () {
/* istanbul ignore next */
return this.$vnode && this.$vnode.ssrContext
}
})
Object.defineProperty(Vue, 'FunctionalRenderContext', {
value: FunctionalRenderContext
})
Vue.version = '__VERSION__'
export default Vue


initGlobalAPI(Vue)

在Vue 构造函数上挂载静态属性和方法即
全局API

// src/core/global-api/index.js
export function initGlobalAPI(Vue: GlobalAPI) {
const cOnfigDef= {}
configDef.get = () => config
// ...
Object.defineProperty(Vue, 'config', configDef)
Vue.util = { // Vue.util
warn,
extend,
mergeOptions,
defineReactive
}
Vue.set = set
Vue.delete = del
Vue.nextTick = nextTick
Vue.optiOns= Object.create(null)
ASSET_TYPES.forEach(type => {
Vue.options[type + 's'] = Object.create(null)
})
Vue.options._base = Vue
extend(Vue.options.components, builtInComponents)
initUse(Vue) // Vue.use
initMixin(Vue) // Vue.mixin
initExtend(Vue) // Vue.extend
initAssetRegisters(Vue) // Vue.component Vue.directive Vue.filter
}

内置组件&命令

在追溯到上一级，在文件
src/platforms/web/runtime/index.js，该文件注册了一些
Vue内置的组件：包裹动态组件
KeepAlive、元素过渡效果
Transition、多个元素过渡
TransitionGroup

// src/platforms/web/runtime/index.js 执行后
// 安装平台特定的utils
Vue.config.isUnknownElement = isUnknownElement
Vue.config.isReservedTag = isReservedTag
Vue.config.getTagNamespace = getTagNamespace
Vue.config.mustUseProp = mustUseProp
// 安装平台特定的 指令 和 组件
Vue.optiOns= {
components: {
KeepAlive,
Transition,
TransitionGroup
},
directives: {
model,
show
},
filters: {},
_base: Vue
}
Vue.prototype.__patch__
Vue.prototype.$mount

compiler编译器添加

再上一级为
src/platforms/web/entry-runtime-with-compiler.js,该文件对原来的
Vue.prototype.$mount进行覆盖定义，并且在Vue上挂载了
compile。给Vue的 $mount 方法添加 compiler 编译器，支持 template。

// src/platforms/web/entry-runtime-with-compiler.js
const mount = Vue.prototype.$mount
// ...
Vue.prototype.$mount = function (){
//... 覆盖 Vue.prototype.$mount
}
// ...
//在 Vue 上挂载 compile
//compileToFunctions 函数的作用，就是将模板 template 编译为render函数。
Vue.compile = compileToFunctions

总结

至此的话我们从宏观上过了一下从我们一层层找到vue到一层层往外看到对Vue的添加属性方法等，我们有了一个整体的概念

1. src/core/instance/index.js vue的构造函数，添加Vue属性和方法
2. src/core/index.js 全局API的挂载
3. src/platforms/web/runtime/index.js 主要是添加web平台特有的配置、组件和指令
4. web/entry-runtime-with-compiler.js 给Vue的 $mount 方法添加 compiler 编译器，支持 template
5. scripts/config.js 编译入口文件