vue源码架构的示例分析
导读:本文共3280字符,通常情况下阅读需要11分钟。同时您也可以点击右侧朗读,来听本文内容。按键盘←(左) →(右) 方向键可以翻页。
摘要: 下载去github上下载Vue https://github.com/vuejs/vuenpminstallnpmrundev运行起来rollup + flowvue使用使用rollup打包,flow规范数据类型rollup可以先用webpack套用,读起来差不多,时间有限,毕竟只有5分钟,这个就不用去看rollup文档了入口打开package.json我们看... ...
目录
(为您整理了一些要点),点击可以直达。下载
去github上下载Vue https://github.com/vuejs/vue
npminstallnpmrundev
运行起来
rollup + flow
vue使用使用rollup打包,flow规范数据类型
rollup可以先用webpack套用,读起来差不多,时间有限,毕竟只有5分钟,这个就不用去看rollup文档了
入口
打开package.json
我们看scripts配置
"dev":"rollup-w-cscripts/config.js--environmentTARGET:web-full-dev","dev:cjs":"rollup-w-cscripts/config.js--environmentTARGET:web-runtime-cjs-dev",
找到scripts/config.js
打开
根据配置TARGET的不同会选择不同的config
同时在这里配置了process.env.NODE_ENV 环境
TARGET有CommonJS,ES Modules,UMD关于js引入类型的
还有weex,ssr
'web-runtime-cjs-dev':{entry:resolve('web/entry-runtime.js'),dest:resolve('dist/vue.runtime.common.dev.js'),format:'cjs',env:'development',banner}
在alias.js下设置了别名路径
我们先介绍src/platforms
里面有web和weex 分别的web和weex入口
在web文件下是CommonJS,ES Modules,UMD关于js引入类型,server的打包入口
打开web/entry-runtime.js
引入
importVuefrom'./runtime/index'exportdefaultVue
打开./runtime/index
importVuefrom'core/index'Vue.prototype.$mount=function(el?:string|Element,hydrating?:boolean):Component{el=el&&inBrowser?query(el):undefinedreturnmountComponent(this,el,hydrating)}exportdefaultVue
在vue原型上添加了mount方法
处理了devtools,没有安装提醒安装devtools
给了这句提示dev环境提示
YouarerunningVueindevelopmentmode.Makesuretoturnonproductionmodewhendeployingforproduction.Seemoretipsathttps://vuejs.org/guide/deployment.html
platforms目录夹讲解完毕
core目录
打开core/instance/index
映入眼前的是
functionVue(options){if(process.env.NODE_ENV!=='production'&&!(thisinstanceofVue)){warn('Vueisaconstructorandshouldbecalledwiththe`new`keyword')}this._init(options)}initMixin(Vue)stateMixin(Vue)eventsMixin(Vue)lifecycleMixin(Vue)renderMixin(Vue)exportdefaultVue
先执行的是initMixin(Vue)
打开init
exportfunctioninitMixin(Vue){Vue.prototype._init=function(options?:Object){constvm=this//auidvm._uid=uid++letstartTag,endTag/*istanbulignoreif*/if(process.env.NODE_ENV!=='production'&&config.performance&&mark){startTag=`vue-perf-start:${vm._uid}`endTag=`vue-perf-end:${vm._uid}`mark(startTag)}//aflagtoavoidthisbeingobservedvm._isVue=true//处理传入的options//mergeoptionsif(options&&options._isComponent){//optimizeinternalcomponentinstantiation//sincedynamicoptionsmergingisprettyslow,andnoneofthe//internalcomponentoptionsneedsspecialtreatment.initInternalComponent(vm,options)}else{//传入的options,默认的options一起合并挂载到vm.$options上vm.$options=mergeOptions(resolveConstructorOptions(vm.constructor),options||{},vm)}/*istanbulignoreelse*/if(process.env.NODE_ENV!=='production'){//代理initProxy(vm)}else{vm._renderProxy=vm}//生命周期initLifecycle(vm)//emiton事件initEvents(vm)//处理rendervdominitRender(vm)callHook(vm,'beforeCreate')//处理InjectionsinitInjections(vm)//resolveinjectionsbeforedata/props//双向数据绑定,监听订阅initState(vm)initProvide(vm)//resolveprovideafterdata/propscallHook(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)}//渲染到domif(vm.$options.el){vm.$mount(vm.$options.el)}}}
lifecycle
打开 lifecycle
exportfunctioncallHook(vm:Component,hook:string){//disabledepcollectionwheninvokinglifecyclehookspushTarget()//执行对象的周期函数,周期函数最后被处理成数组consthandlers=vm.$options[hook]constinfo=`${hook}hook`if(handlers){for(leti=0,j=handlers.length;i<j;i++){invokeWithErrorHandling(handlers[i],vm,null,vm,info)}}if(vm._hasHookEvent){vm.$emit('hook:'+hook)}popTarget()
callHook 的时候,是执行相应周期,开发者在周期函数里所写的
Events
initEvents实现了 emit on 等方法,请参考监听者订阅者模式,这里不详解
render
renderMixin函数
添加了 $nextTick _render 原型对象
$nextTick会在dom跟新后立即调用
nextTick(fn, this)是一个自执行函数
_render返回的是node的js数据,还不是dom
做了Vdom
initRender函数
给vm添加了_c和 $createElement用来渲染的方法
state
if(!(keyinvm)){proxy(vm,`_props`,key)}
给vue属性做代理,访问this.a可以得到this.data.a 的值
exportfunctioninitState(vm:Component){vm._watchers=[]constopts=vm.$optionsif(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)}}
给数据做监听
stateMixin函数
添加原型对象
Vue.prototype.$set=setVue.prototype.$delete=del
其他
src/compiler 做了编译处理
core/componetd 做了keep-alive
core/util 封装了通用方法
core/vdom vdom算法
以上整体架构分析完毕
</div> <div class="zixun-tj-product adv-bottom"></div> </div> </div> <div class="prve-next-news">
vue源码架构的示例分析的详细内容,希望对您有所帮助,信息来源于网络。