当前位置: 首页 > Web前端 > vue.js

Vue源码解析——新Vue怎么了

时间:2023-04-01 11:36:46 vue.js

文章首发于个人博客小灰灰空间。新人刚开始写博客记录生活,请指教newVueprocessVue构造函数定义functionVue(options){if(process.env.NODE_ENV!=='production'&&!(thisinstanceofVue)){//ensure只能使用new关键字创建vue实例,不能通过函数的正常调用方法warn('Vue是一个构造函数,应该用`new`关键字调用')}//initialize,the_initmethod是在Vue原型方法上this._init(options)}初始化方法_initVue.prototype._init=function(options?:Object){constvm:Component=this//auidvm._uid=uid++letstartTag,endTag/*istanbul忽略if*/if(process.env.NODE_ENV!=='production'&&config.performance&&mark){startTag=`vue-perf-start:${vm._uid}`endTag=`vue-perf-end:${vm._uid}`mark(startTag)}//避免被观察到的标志vm._isVue=true//合并选项if(options&&options._isComponent){//优化内部组件实例化on//因为动态选项合并很慢,而且没有一个//内部组件选项需要特殊处理。//初始化子组件时,合并子组件的选项initInternalComponent(vm,options)}else{//外部调用newVue时合并选项vm.$options=mergeOptions(resolveConstructorOptions(vm.constructor),options||{},vm)}/*istanbulignoreelse*/if(process.env.NODE_ENV!=='production'){initProxy(vm)}else{vm._renderProxy=vm}//暴露真实的自我vm._self=vm//声明周期initializationinitLifecycle(vm)//事件中心初始化initEvents(vm)//初始化渲染initRender(vm)callHook(vm,'beforeCreate')//初始化注入initInjections(vm)//在data/props之前解析注入//初始化propsmethodsdatacomputedwatchinitState(vm)//initializeprovideinitProvide(vm)//resolveprovideafterdata/propscallHook(vm,'created')/*istanbul忽略if*/if(process.env.NODE_ENV!=='生产'&&config.performance&;&mark){vm._name=formatComponentName(vm,false)mark(endTag)measure(`vue${vm._name}init`,startTag,endTag)}//如果有el选项,调用方式为挂在元素上if(vm.$options.el){vm.$mount(vm.$options.el)}}总结使用newVue创建Vue实例时,会调用原型上的_init方法进行初始化,主要做了几件事Merge配置,初始化生命周期,初始化时间中心,初始化渲染,初始化dataprops,computed等数据,最后挂载元素