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、初始化生命周期 root,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.options.el);
}
};
主要核心:
// 4、初始化生命周期 root,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下篇有时间细说
上面代码乱是因为我用代码片段直接变成一行了,见谅一下