深圳网站建设公司联华,电子商务网站设计的原则,知乎问答网站开发教程,福州网站建设网络公司今天我们来分析使用new Vue()
之前研究时#xff0c;只是说是在创建一个实例。并没有深入进行研究
在vue的源码中找下Vue的构造函数
function Vue(options) {if (!(this instanceof Vue)) {warn$2(Vue is a constructor and should be called with the new keyword);}this.…今天我们来分析使用new Vue()
之前研究时只是说是在创建一个实例。并没有深入进行研究
在vue的源码中找下Vue的构造函数
function Vue(options) {if (!(this instanceof Vue)) {warn$2(Vue is a constructor and should be called with the new keyword);}this._init(options);}
if判断语句是指需要用new 关键字来构造实例对象
后面就是 this._init(options) 调用了_init方法参数是options
找到_init(options)方法
接下来我们逐句分析
Vue.prototype._init function (options) {// 1. 定义变量对象vm 后续需要给vm添加属性再将vm作为参数调用一系列函数const vm this;// a uid// 2. vm添加_uid属性, 自增vm._uid uid;let startTag, endTag;// 3. istanbul ignore if 是一个注释指令用于在代码覆盖率工具 Istanbul 中标记某段代码以便在生成代码覆盖率报告时忽略该段代码的覆盖率计算// 从英文名猜下是关于performance性能的暂时先不管它。后续有遇到再继续研究/* istanbul ignore if */if (config.performance mark) {startTag vue-perf-start:${vm._uid};endTag vue-perf-end:${vm._uid};mark(startTag);}// a flag to mark this as a Vue instance without having to do instanceof// check// 4. vm添加_isVue属性vm._isVue true;// avoid instances from being observed// 5. vm添加__v_skip属性vm.__v_skip true;// effect scope// 6. vm添加_scope属性 _scope是new EffectScope()vm._scope new EffectScope(true /* detached */);// #13134 edge case where a child component is manually created during the// render of a parent component// 7. vm._scope设置属性vm._scope.parent undefined;vm._scope._vm true;// merge options// 8. 核心代码对于入参options进行判断// initInternalComponent(vm, options) 这个我们暂时还没有遇到过先跳过// 或者mergeOptions() 一会儿研究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);}/* istanbul ignore else */// 9. initProxy(vm) 一会儿研究{initProxy(vm);}// expose real self// 10. vm添加_self属性vm._self vm;// 11. 调用一堆方法 一会儿研究initLifecycle(vm);initEvents(vm);initRender(vm);callHook$1(vm, beforeCreate, undefined, false /* setContext */);initInjections(vm); // resolve injections before data/propsinitState(vm);initProvide(vm); // resolve provide after data/propscallHook$1(vm, created);/* istanbul ignore if */// 12. 感觉又是跟性能有关的内容if (config.performance mark) {vm._name formatComponentName(vm, false);mark(endTag);measure(vue ${vm._name} init, startTag, endTag);}// 13.如果vm.$options有el参数后续执行了$mount挂载if (vm.$options.el) {vm.$mount(vm.$options.el);}};
