vue -initMixin

981 阅读1分钟

initMixin 在初始化 vue 的时候调用了。

initMixin 在 code/instance/init.js initMixind 的作用就是在 Vue 的原型上增加_init 方法,构造 Vue 实例的时候会调用这个_init 方法来初始化 Vue 实例。

let startTag, endTag    
    /* istanbul ignore if */    
if (process.env.NODE_ENV !== 'production' && config.performance && mark) {      
    startTag = `vue-perf-init:${vm._uid}`      
    endTag = `vue-perf-end:${vm._uid}`      
    mark(startTag)    
}
/*中间代码省略*/
if (process.env.NODE_ENV !== 'production' && config.performance && mark) {      
    /*格式化组件名*/      
    vm._name = formatComponentName(vm, false)      
    mark(endTag)      
    measure(`${vm._name} init`, startTag, endTag) 
}

mark() 方法是方法在浏览器的性能缓冲区中使用给定名称添加一个timestamp(时间戳)。

measure() 方法在浏览器性能记录缓存中创建了一个名为时间戳的记录来记录两个特殊标志位(通常称为开始标志和结束标志)。 被命名的时间戳称为一次测量(measure)。

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      
    ) 
}

createComponentInstanceForVnode 会把 options._isComponent 置成 true,看这个单词的意思会不会是「是不是组件」的意思?

这一步是合并 options 后面在仔细分析里面的方法。

vm._self = vm    /*初始化生命周期*/    
initLifecycle(vm)    /*初始化事件*/    
initEvents(vm)    /*初始化 render*/    
initRender(vm)    /*调用 beforeCreate 钩子函数并且触发 beforeCreate 钩子事件*/    
callHook(vm, 'beforeCreate')    
initInjections(vm) // resolve injections before data/props    
/*初始化 props、methods、data、computed 与 watch*/    
initState(vm)    
initProvide(vm) // resolve provide after data/props    
/*调用 created 钩子函数并且触发 created 钩子事件*/    
callHook(vm, 'created')

根据注释咱们可以了解到进行了初始化生命周期、初始化事件、初始化 render、调用 beforeCreate 钩子函数并且触发 beforeCreate 钩子事件、初始化 props、methods、data、computed 与 watch、调用 created 钩子函数并且触发 created 钩子事件一系列操作。

if (vm.$options.el) {      /*挂载组件*/   vm.$mount(vm.$options.el)}

最后挂载组件。

vm.$options.el 是 Vue 实例关联的 DOM 元素。