Interpretation of vue source code architecture (detailed)

npm install npm run dev

"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",

'web-runtime-cjs-dev': { entry: resolve('web/entry-runtime.js'), dest: resolve('dist/vue.runtime.common.dev.js'), format: 'cjs', env: 'development', banner }

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

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

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

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

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

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 
When callingHook, it is executed Corresponding cycle, the 
Events
initEvents written by the developer in the cycle function implements emit on and other methods. Please refer to the listener subscriber model, which will not be explained in detail here
 render
renderMixin function
Added $nextTick _render prototype object
$nextTick will be called immediately after the dom is updated
nextTick(fn, this) It is a self-executing function 
_render returns the js data of the node. It is not the dom
 that made the Vdom
initRender function
 added to the vm. The methods _c and $createElement are used to render 
state
if (!(key in vm)) { proxy(vm, `_props`, key) }
        

         Copy after login
        
       

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

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