脚本宝典收集整理的这篇文章主要介绍了5分钟通读vue源码架构，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。

小宝典致力于为广大程序猿（媛）提供高品质的代码服务，请大家多多光顾小站，小宝典在此谢过。

下载

去github上下载Vue

npm install  npm run dev

运行起来

rollup + flow

vue使用使用rollup打包，flow规范数据类型

rollup可以先用webpack套用，读起来差不多，时间有限，毕竟只有5分钟，这个就不用去看rollup文档了

入口

打开package.json
我们看scripts配置

 "dev": "rollup -w -c scripts/config.js --environment TARGET:web-full-dev",   "dev:cjs": "rollup -w -c scripts/config.js --environment TARGET: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
引入

import Vue from './runtime/index'  export default Vue

打开./runtime/index

import Vue from 'core/index'  Vue.prototype.$mount = function (   el?: string | Element,   hydrating?: boolean ): Component {   el = el && inBrowser ? query(el) : undefined   return mountComponent(this, el, hydrating) } export default Vue

在vue原型上添加了mount方法
处理了devtools，没有安装提醒安装devtools

给了这句提示dev环境提示

You are running Vue in development mode. Make sure to turn on production mode when deploying for production. See more tips at https://vuejs.org/guide/deployment.html

platforms目录夹讲解完毕

core目录

打开core/instance/index
映入眼前的是

function Vue (options) {   if (process.env.NODE_ENV !== 'production' &&     !(this instanceof Vue)   ) {     warn('Vue is a constructor and should be called with the `new` keyword')   }   this._init(options) }  initMixin(Vue) stateMixin(Vue) eventsMixin(Vue) lifecycleMixin(Vue) renderMixin(Vue)  export default Vue 

先执行的是initMixin(Vue)

打开init

export function initMixin (Vue) {   Vue.prototype._init = function (options?: Object) {     const vm = this     // a uid      vm._uid = uid++          let startTag, endTag     /* istanbul ignore if */     if (process.env.NODE_ENV !== 'production' && config.performance && mark) {       startTag = `vue-perf-start:${vm._uid}`       endTag = `vue-perf-end:${vm._uid}`       mark(startTag)     }      // a flag to avoid this being observed     vm._isVue = true     // 处理传入的options     // merge options     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 {        // 传入的options,默认的options一起合并挂载到vm.$options上       vm.$options = mergeOptions(         resolveConstructorOptions(vm.constructor),         options || {},         vm       )     }     /* istanbul ignore else */     if (process.env.NODE_ENV !== 'production') {       // 代理       initProxy(vm)     } else {       vm._renderProxy = vm     }     // 生命周期     initLifecycle(vm)      // emit on 事件     initEvents(vm)     // 处理render vdom     initRender(vm)     callHook(vm, 'beforeCreate')     // 处理Injections     initInjections(vm) // resolve injections before data/props     // 双向数据绑定，监听订阅     initState(vm)     initProvide(vm) // resolve provide after data/props     callHook(vm, 'created')          /* istanbul ignore if */     if (process.env.NODE_ENV !== 'production' && config.performance && mark) {       vm._name = formatComponentName(vm, false)       mark(endTag)       measure(`vue ${vm._name} init`, startTag, endTag)     }     // 渲染到dom     if (vm.$options.el) {       vm.$mount(vm.$options.el)     }   } }

lifecycle

打开 lifecycle

 export function callHook (vm: Component, hook: string) {   // disable dep collection when invoking lifecycle hooks   pushTarget()   //执行对象的周期函数，周期函数最后被处理成数组   const handlers = vm.$options[hook]   const info = `${hook} hook`   if (handlers) {     for (let i = 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 (!(key in vm)) {       proxy(vm, `_props`, key)     }

给vue属性做代理，访问this.a可以得到this.data.a 的值

export function initState (vm: Component) {   vm._watchers = []   const opts = 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)   } }

给数据做监听

stateMixin函数

添加原型对象

 Vue.prototype.$set = set  Vue.prototype.$delete = del

其他

src/compiler 做了编译处理

core/componetd 做了keep-alive

core/util 封装了通用方法

core/vdom vdom算法

以上整体架构分析完毕

附张图

觉得可用，就经常来吧！ 脚本宝典 欢迎评论哦！ vue，巧夺天工，精雕玉琢。小宝典献丑了！

脚本宝典总结

以上是脚本宝典为你收集整理的5分钟通读vue源码架构全部内容，希望文章能够帮你解决5分钟通读vue源码架构所遇到的问题。

如果觉得脚本宝典网站内容还不错，欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。