加载过程

加载vue.js执行的方法


initGlobalAPI(Vue) 静态方法

// 一个对象,包含 Vue 的全局配置。
Object.defineProperty(Vue, 'config', configDef) 

// 工具类
Vue.util = util

//用于设置对象属性
Vue.set = set

// 用于删除对象的属性
Vue.delete = del

// 在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法,获取更新后的 DOM。
Vue.nextTick = util.nextTick  

Vue.options = Object.create(null)


initUse(Vue)

// 安装 Vue.js 插件
Vue.use


initMixin(Vue)

// 全局注册一个混合,影响注册之后所有创建的每个 Vue 实例。
Vue.mixin


initExtend(Vue)

// 使用基础 Vue 构造器,创建一个“子类”。参数是一个包含组件选项的对象
Vue.extend


initAssetRegisters(Vue)

Vue.components  // 用于注册或获取全局组件
Vue.filters     // 用于注册或获取全局过滤器
Vue.directive   // 用于注册或获取全局指令


原型方法


initMixin(Vue)

Vue.prototype._init


stateMixin(Vue)

// 原型添加跟操作数据相关的属性和方法
Vue.prototype.$data
Vue.prototype.$set  
Vue.prototype.$delete


eventsMixin(Vue)

// 原型添加自定义事件相关的方法
Vue.prototype.$on  
Vue.prototype.$once  
Vue.prototype.$off  
Vue.prototype.$emit


lifecycleMixin(Vue)

// 原型添加生命周期方法
Vue.prototype._mount  
Vue.prototype._update  
Vue.prototype._updateFromParent  
Vue.prototype.$forceUpdate  
Vue.prototype.$destroy


renderMixin(Vue)

// 原型添加渲染相关的方法
Vue.prototype.$nextTick  
Vue.prototype._render  
// shorthands used in render functions  
Vue.prototype._h = createElement  
// toString for mustaches  
Vue.prototype._s = _toString  
// number conversion  
Vue.prototype._n = toNumber  
// empty vnode  
Vue.prototype._e = emptyVNode  
// loose equal  
Vue.prototype._q = looseEqual  
// loose indexOf  
Vue.prototype._i = looseIndexOf  
// render static tree by index  
Vue.prototype._m  
// filter resolution helper  
Vue.prototype._f  
// render v-for  
Vue.prototype._l  
// renderSlot  
Vue.prototype._t  
// apply v-bind object  
Vue.prototype._b  
// expose v-on keyCodes  
Vue.prototype._k


new Vue({...}) 创建一个 vue 实例的过程

new Vue的过程


Vue.prototype._init(options)

调用 init 方法


initLifecycle(vm)

// 初始化实例生命周期的一些属性
vm.$parent = parent  
vm.$root = parent ? parent.$root : vm  
vm.$children = []  
vm.$refs = {}  
vm._watcher = null  
vm._inactive = false  
vm._isMounted = false  
vm._isDestroyed = false  
vm._isBeingDestroyed = false


initEvents(vm)

// 初始化事件
vm._events = Object.create(null)  
vm._updateListeners


callHook(vm, 'beforeCreate')

执行生命周期函数 beforeCreate,此时数据还没有初始化。


initState(vm)

// 初始化实例状态
vm._watchers = []  
initProps(vm)
initData(vm) 
initComputed(vm)  
initMethods(vm)  
initWatch(vm)


initProps(vm)

初始化 props 属性,将组件 options 中定义的 props 或者实例 options 定义的 propsData 进行处理。


initData(vm)

  1. 初始化实例定义的 data 数据,vm._data = options.data,对 options 中 data 和 props 进行校验合法性,不允许他们有相同的 key 值等。
  2. proxy(vm, keys[i]) 将 data 通过 Object.defineProperty 挂载到实例 vm 上:Object.defineProperty(vm, key, {})
  3. observe(data) vm.$datavm._datavm[key]区别:
    vm.$data 和 vm[key] 通过 Object.defineProperty 的 get 和 set 返回的其实是 vm._data 的值。
    vm._data 就是 options 里 data 的值。


proxy(vm, keys[i])

利用 Object.defineProperty 将实例 options.data 代理到 vm 上,方便通过 vm[key] 获取数据。 数据可枚举,可遍历。
get:vm._data[key]
set:vm._data[key] = val


observe(data)

对 data 进行一系列校验,通过了则创建对监测 data 数据变动的观察者实例:
ob = new Observer(value)


new Observer(value)

创建 data 的观察者实例

创建后,vm.$data 和 vm._data 会有一个 ob 的对象,值是指向观察者的实例。通过 Object.definePoroperty 给 data 的每个属性添加 getter 和 setter。

如果对值进行set操作则会调用dep.notify()去触发watchers里的每个订阅者进行更新


initComputed(vm)

计算属性的初始化,将 options.computed 通过 Object.defineProperty 挂载到 vm 上。 get 和 set 方法在 options.computed.key 里进行定义


initMethods(vm)

初始化方法,即 options.methods 里的方法。 将方法挂载到 vm 上,方便通过 vm 实例去调用。


initWatch(vm)

初始化 watch 的一些操作,即 options.watch


callHook(vm, 'created')

执行生命周期函数 created,此时数据已经初始化完成。


initRender(vm)

初始化渲染


vm.$mount(vm.$options.el)

如果 options.el 存在则调用 $mount 方法


compileToFunctions

options.render 不存在则执行编译函数,会返回 render 方法。

render 方法执行返回的是一个 vnode 对象。


parse(template, options)

解析模板(提取节点的属性,标签名,父节点子节点,事件,指令等),返回一个 ast 对象,包含了对模板 html 的描述。


optimize(ast, options)

这个函数起优化作用:检测ast树里纯静态的 dom 节点(例如文本节点),并给他们标记(static = true)。


generate(ast, options)

根据 ast 树,生成一个 render 函数,函数返回 vnode 虚拟 dom。


this._mount(el, hydrating)

执行 mount 函数


callHook(vm, 'beforeMount')

执行生命周期 beforeMount 函数,此时还没有渲染到页面。


vm._watcher = new Watcher(vm, ()=>{...})

创建订阅者,并且执行定义的任务函数 vm._render。 一旦 observer 检测到数据的变动则会执行 vm._render()。


callHook(vm, 'mounted')

执行生命周期 mounted 函数,此时已经渲染完成。