Skip to content

Vue2 的 new Vue() 做了什么?

new Vue() 之前做了什么?

js
// vue-2.5.16/src/core/instance/init.js
// 创建全局对象
function Vue(options) {
	this._init(options);
}
// 创建全局对象的属性方法
// initMixin(Vue)
//    Vue._init = *
// stateMixin(Vue)
//    Vue.prototype.$set = *
//    Vue.prototype.$delete = *
//    Vue.prototype.$data = *
//    Vue.prototype.$props = *
// eventsMixin(Vue)
//    Vue.prototype.$on = *
//    Vue.prototype.$once = *
//    Vue.prototype.$off = *
//    Vue.prototype.$emit = *
// lifecycleMixin(Vue)
//    Vue.prototype._update = *
//    Vue.prototype.$forceUpdate = *
//    Vue.prototype.$destroy = *
// renderMixin(Vue)
//    installRenderHelpers(Vue.prototype)
//    Vue.prototype.$nextTick = *
//    Vue.prototype._render = *
// initGlobalAPI(Vue)
//    Vue.util = *
//    Vue.set = *
//    Vue.delete = *
//    Vue.nextTick = *
//    Vue.use = *
//    Vue.mixin = *
//    Vue.extend = *
//    Vue.options = Object.create(null)
//    Vue.options['components'] = Object.create(null)
//    Vue.options['directivs'] = Object.create(null)
//    Vue.options['filtes'] = Object.create(null)
// vue-2.5.16/src/core/instance/init.js
// 创建全局对象
function Vue(options) {
	this._init(options);
}
// 创建全局对象的属性方法
// initMixin(Vue)
//    Vue._init = *
// stateMixin(Vue)
//    Vue.prototype.$set = *
//    Vue.prototype.$delete = *
//    Vue.prototype.$data = *
//    Vue.prototype.$props = *
// eventsMixin(Vue)
//    Vue.prototype.$on = *
//    Vue.prototype.$once = *
//    Vue.prototype.$off = *
//    Vue.prototype.$emit = *
// lifecycleMixin(Vue)
//    Vue.prototype._update = *
//    Vue.prototype.$forceUpdate = *
//    Vue.prototype.$destroy = *
// renderMixin(Vue)
//    installRenderHelpers(Vue.prototype)
//    Vue.prototype.$nextTick = *
//    Vue.prototype._render = *
// initGlobalAPI(Vue)
//    Vue.util = *
//    Vue.set = *
//    Vue.delete = *
//    Vue.nextTick = *
//    Vue.use = *
//    Vue.mixin = *
//    Vue.extend = *
//    Vue.options = Object.create(null)
//    Vue.options['components'] = Object.create(null)
//    Vue.options['directivs'] = Object.create(null)
//    Vue.options['filtes'] = Object.create(null)

new Vue(App or {}) 做了什么?

js
// vue-2.5.16/src/core/instance/init.js
// 执行 new Vue 会调用方法 this._init(options);

let uid = 0;
Vue.prototype._init = function (options?: Object) {
	const vm: Component = this;

	if (options && options._isComponent) {
		// 内部组件
		initInternalComponent(vm, options);
	} else {
		// 配置项
		vm.$options = mergeOptions(resolveConstructorOptions(vm.constructor), options || {}, vm);
	}
	vm._uid = uid++;
	vm._isVue = true;
	vm._self = vm; // 暴露真实自我

	initLifecycle(vm); // 初始化生命周期
	initEvents(vm); // 初始化事件
	initRender(vm); // 初始化渲染
	callHook(vm, 'beforeCreate'); // 调用生命周期钩子函数
	initInjections(vm); //初始化 injections
	initState(vm); // 初始化 props, methods, data, computed, watch
	initProvide(vm); // 初始化 provide
	callHook(vm, 'created'); // 调用生命周期钩子函数

	if (vm.$options.el) vm.$mount(vm.$options.el); // 尝试挂载真实 DOM
};
// vue-2.5.16/src/core/instance/init.js
// 执行 new Vue 会调用方法 this._init(options);

let uid = 0;
Vue.prototype._init = function (options?: Object) {
	const vm: Component = this;

	if (options && options._isComponent) {
		// 内部组件
		initInternalComponent(vm, options);
	} else {
		// 配置项
		vm.$options = mergeOptions(resolveConstructorOptions(vm.constructor), options || {}, vm);
	}
	vm._uid = uid++;
	vm._isVue = true;
	vm._self = vm; // 暴露真实自我

	initLifecycle(vm); // 初始化生命周期
	initEvents(vm); // 初始化事件
	initRender(vm); // 初始化渲染
	callHook(vm, 'beforeCreate'); // 调用生命周期钩子函数
	initInjections(vm); //初始化 injections
	initState(vm); // 初始化 props, methods, data, computed, watch
	initProvide(vm); // 初始化 provide
	callHook(vm, 'created'); // 调用生命周期钩子函数

	if (vm.$options.el) vm.$mount(vm.$options.el); // 尝试挂载真实 DOM
};

༼ つ/̵͇̿̿/’̿’̿ ̿ ̿̿ ̿̿◕ _◕ ༽つ/̵͇̿̿/’̿’̿ ̿ ̿̿ ̿̿ ̿̿