1.说一说new Vue中发生了什么?

发布于 2022年 02月 26日 01:53

我们今天也来说一下new Vue中究竟做了什么,1.我们去跟一下流程看一下

2.进入到Vue函数,看到_init初始化操作,那么我们现在进去看一下这个函数中究竟是什么

初次进入core/instance/init.js类库中先执行以下几个操作

initMixin(Vue) 

stateMixin(Vue) 

eventsMixin(Vue) 

lifecycleMixin(Vue) 

renderMixin(Vue)

使用混入Mixin的方式传入Vue,为Vue的原型prototype上增加方法。

3.我们继续跟会进入new的实例的_init流程

4._init代码贴出来我们看一下具体更详细的做了些什么

 Vue.prototype._init = function (options?: Object) {

const vm: Component = this;

// a uid

vm._uid = uid++;

let startTag, endTag;

// 1、startTag生成

/* istanbul ignore if */

if (process.env.NODE_ENV !== "production" && config.performance && mark) {

startTag = `vue-perf-start:${vm._uid}`;

endTag = `vue-perf-end:${vm._uid}`;

mark(startTag);

}

// a flag to avoid this being observed

vm._isVue = true;

// 2、合并我们Options参数

// merge options

if (options && options._isComponent) {

// optimize internal component instantiation

// since dynamic options merging is pretty slow, and none of the

// internal component options needs special treatment.

initInternalComponent(vm, options);

} else {

vm.$options = mergeOptions(

resolveConstructorOptions(vm.constructor),

options || {},

vm

);

}

// 3、初始化作用域代理

/* istanbul ignore else */

if (process.env.NODE_ENV !== "production") {

initProxy(vm);

} else {

vm._renderProxy = vm;

}

// expose real self

vm._self = vm;

// 4、初始化生命周期 parent,parent,root,children,children,refs

initLifecycle(vm);

// 5、处理父组件传递的事件和回调

initEvents(vm);

// 6、初始化render函数

initRender(vm);

// 7、beforeCreate钩子函数

callHook(vm, "beforeCreate");

// 8、注入传递的数据

initInjections(vm); // resolve injections before data/props

// 9、组件数据初始化(初始化了Methods、Props、data、computed、watcher)

initState(vm);

// 10、提供数据注入

initProvide(vm); // resolve provide after data/props

// 11、created钩子函数

callHook(vm, "created");

// 12、endTag生成

/* istanbul ignore if */

if (process.env.NODE_ENV !== "production" && config.performance && mark) {

vm._name = formatComponentName(vm, false);

mark(endTag);

measure(`vue ${vm._name} init`, startTag, endTag);

}

// 13、执行挂载,获取vdom并转换为dom

if (vm.$options.el) {

vm.mount(vm.mount(vm.options.el);

}

};

主要核心:

// 4、初始化生命周期 parent,parent,root,children,children,refs

initLifecycle(vm);

// 5、处理父组件传递的事件和回调

initEvents(vm);

// 6、初始化render函数

initRender(vm);

// 7、beforeCreate钩子函数

callHook(vm, "beforeCreate");

// 8、注入传递的数据

initInjections(vm); // resolve injections before data/props

// 9、组件数据初始化(初始化了Methods、Props、data、computed、watcher)

initState(vm);

// 10、提供数据注入

initProvide(vm); // resolve provide after data/props

// 11、created钩子函数

callHook(vm, "created");

mount下篇有时间细说 

上面代码乱是因为我用代码片段直接变成一行了,见谅一下

推荐文章