vue 实例化几种方式_vue实例化都干了什么

本文将结合例子进行一步步讲解，例子也会从简单到复杂逐步提升，这样理解的更深刻

复制代码

const app = new Vue({

template: '

child

',

})

app.$mount('#app');

复制代码

创建实例

首先先调用new Vue创建了一个实例，在core/instance/index中定义了Vue的构造函数

function Vue(options){

this._init(options)

}

initMixin(Vue)

stateMixin(Vue)

eventsMixin(Vue)

lifecycleMixin(Vue)

renderMixin(Vue)

复制代码

在该文件中定义了Vue构造函数，并且通过下面几个Mixin方法，在Vue原型上也定义了一些方法，为什么不用class因为class没有prototype这么灵活。

Mixin方法

方法

属性

initMixin

_init

-

stateMixin

$set、$delete、$watch

$data、$props

eventsMixin

$on、$off、$once、$emit

-

lifecycleMixin

_update、$forceUpdate、$detory

-

renderMixin

_render、$nextTick

-

调用_init方法

方法在core/instance/init.js中,

let uid = 0;

Vue.prototype._init = function (options){

const vm = this;

vm._uid = uid++;

vm._isVue = true;

if (options && options._isComponent) {

initInternalComponent(vm, options)

} else {

vm.$options = mergeOptions(

resolveConstructorOptions(vm.constructor),

options || {},

vm

)

}

vm._renderProxy = vm;

vm._self = vm;

initLifecycle(vm);

initEvents(vm);

initRender(vm);

callhook(vm, 'beforeCreate');

initInjections(vm);

initState(vm);

initProvide(v