實例講解vue源碼架構

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 < j; i++) {
 invokeWithErrorHandling(handlers[i], vm, null, vm, info)
 }
 }
 if (vm._hasHookEvent) {
 vm.$emit('hook:' + hook)
 }
 popTarget()

if (!(key in vm)) {
 proxy(vm, `_props`, key)
 }

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