Let’s also talk about what is done in New Vue today. 1. Let’s follow the process and have a look
2. Enter the Vue function and see the _init initialization operation, so let’s go inside and see what is in this function
Do the following when you first enter the core/instance/init.js class library
initMixin(Vue)
stateMixin(Vue)
eventsMixin(Vue)
lifecycleMixin(Vue)
renderMixin(Vue)
Add methods to Vue’s prototype by mixing it with mixins.
3. We continue the _init process that will enter the instance of new
The 4._init code is posted and let’s see what we did in more detail
Vue.prototype._init = function (options? : Object) {
const vm: Component = this;
// a uid
vm._uid = uid++;
let startTag, endTag;
// startTag is generated
/* 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. Merge our Options parameters
// 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. Initialize the scope proxy
/* istanbul ignore else */
if (process.env.NODE_ENV ! == “production”) {
initProxy(vm);
} else {
vm._renderProxy = vm;
}
// expose real self
vm._self = vm;
// 4. Initialize the lifecycle
root,
refs
initLifecycle(vm);
// handle events and callbacks passed by the parent component
initEvents(vm);
// Initialize the render function
initRender(vm);
// 8, beforeCreate hook function
callHook(vm, “beforeCreate”);
// 8. Inject the passed data
initInjections(vm); // resolve injections before data/props
// 9. Initialize component data (Methods, Props, data, computed, watcher)
initState(vm);
// provide data injection
initProvide(vm); // resolve provide after data/props
// create hook functions
callHook(vm, “created”);
// endTag is generated
/* 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);
}
// perform mount, obtain vDOM and convert to DOM
if (vm.$options.el) {
vm.
options.el);
}
};
Main core:
// 4. Initialize the lifecycle
root,
refs
initLifecycle(vm);
// handle events and callbacks passed by the parent component
initEvents(vm);
// Initialize the render function
initRender(vm);
// 8, beforeCreate hook function
callHook(vm, “beforeCreate”);
// 8. Inject the passed data
initInjections(vm); // resolve injections before data/props
// 9. Initialize component data (Methods, Props, data, computed, watcher)
initState(vm);
// provide data injection
initProvide(vm); // resolve provide after data/props
// create hook functions
callHook(vm, “created”);
Mount has time for more details in the next post
The above code is messy because I used the code snippet directly into a line, forgive me