vue源码分析1.初始化1.newVue()当我们newVue({el:'#app',data:{}})时,必须找到Vue的结构体函数文件路径为src\core\instance\index.jsVue的构造函数判断环境后立即调用this._init()方法并传入参数。functionVue(options){判断是否是生产环境,检查vue是否在这个原型的prototype上//if(process.env.NODE_ENV!=='production'&&//!(thisinstanceofVue)//){//warn('Vue是一个构造函数,应该使用`new`关键字调用')//}this._init(options)}合并配置initMixin(Vue)定义$data、props、set、delete、watch,$data和$props是只读属性。stateMixin(Vue)初始化事件中心eventsMixin(Vue)初始化生命周期lifecycleMixin(Vue)初始化渲染函数renderMixin(Vue)export默认VueVue是Function实现的类,使用必须是new实例,然后调用构造函数下面的this._init方法执行了很多方法(***MIixin(Vue))。这些方法的作用是给Vue的原型添加一些方法。这些方法按功能定义,并在多个模块中实现。2.this._init()的流程this._init(options)这个方法是在initMixin(Vue)中实现的。Pathsrc\core\instance\init.jsVue:Class指定传入参数为classclassexportfunctioninitMixin(Vue:Class){在Vue的原型上添加_init()方法负责Vue的初始化过程。vue.prototype._init=function(options?:Object){获取vue实例constvm:Component=this每个vue上面都有一个uid,让vueuid自增保证vue的唯一性vm._uid=uid++vue实例不应该是响应式的,做一个标记vm._isVue=true**************************************************************************************如果(选项&&options._isComponent){/***如果在子组件初始化的时候走这里,这里只是做一些性能优化*将组件配置对象上的一些深层次的属性放到vm.$options选项中,提高代码执行效率*/initInternalComponent(vm,options)}else{vm.$options=mergeOptions(resolveConstructorOptions(vm.constructor),options||{},vm)}/*伊斯坦布尔忽略其他*/if(process.env.NODE_ENV!=='production'){initProxy(vm)}else{vm._renderProxy=vm}//暴露真实自我vm._self=vm组件关系初始化initLifecycle(vm)initialization自定义事件initEvents(vm)初始化槽initRender(vm)callbeforeCreateLifecyclecallHook(vm,'beforeCreate')provideandrejectinitInjections(vm)//resolveinjectionsbeforedata/props数据初始化、处理props方法、计算数据watch等响应式原理的核心initState(vm)provideandrejectinitProvide(vm)//resolve在数据/道具调用创建后提供生命周期callHook(vm,'created')/*istanbulignoreif*///if(process.env.NODE_ENV!=='production'&&config.performance&&mark){//vm._name=formatComponentName(vm,false)//mark(endTag)//measure(`vue${vm._name}init`,startTag,endTag)//}判断数据中是否有el,如果有,自动if$mount不执行,必须手动挂载if(vm.$options.el){vm.$mount(vm.$options.el)}}}3.响应原理initState(vm)initState与import{initState}from'./state在同级目录'找到state.jsexportfunctioninitState(vm:Component){vm._watchers=[]constopts=vm.$options处理道具对象并在每个道具对象上设置响应式if(opts.props)initProps(vm,opts.props)处理方法if(opts.methods)initMethods(vm,opts.methods)初始化数据,if(opts.data){initData(vm)}else{observe(vm._data={},true/*asRootData*/)}过程计算if(opts.computed)initComputed(vm,opts.computed)过程观察if(opts.watch&&opts.watch!==nativeWatch){initWatch(vm,opts.watch)}}