1 function Vue (options) {
2   this._init(options)
3 }

 1 Vue.prototype._init = function (options?: Object) {
 2     const vm: Component = this
 3
 4     //监听对象变化时用于过滤vm
 5     vm._isVue = true
 6     // 合并对象
 7     vm.$options = mergeOptions(
 8       resolveConstructorOptions(vm.constructor),
 9       options || {},
10       vm
11     )
12     // expose real self
13     vm._self = vm
14
15     initLifecycle(vm)
16     //给vm添加了一些虚拟dom、slot等相关的属性和方法。
17     initRender(vm)
18     //调用beforeCreate钩子函数。
19     callHook(vm, 'beforeCreate')
20     //初始化数据 props,methods,data,computed,watch
21     initState(vm)
22     //调用created钩子函数。
23     callHook(vm, 'created')
24
25     if (vm.$options.el) {
26       vm.$mount(vm.$options.el)
27     }
28   }

1 export function resolveConstructorOptions (Ctor: Class<Component>) {
2   let options = Ctor.options
3   return options
4 }

1 /**
2  * Option overwriting strategies are functions that handle
3  * how to merge a parent option value and a child option
4  * value into the final value.
5  */
6 const strats = config.optionMergeStrategies

 1 /**
 2  * Merge two option objects into a new one.
 3  */
 4 function mergeOptions (
 5   parent,
 6   child,
 7   vm
 8 ) {
 9   var options = {};
10   var key;
11   for (key in parent) {
12     mergeField(key);
13   }
14   for (key in child) {
15     if (!hasOwn(parent, key)) {
16       mergeField(key);
17     }
18   }
19   function mergeField (key) {
20     var strat = strats[key] || defaultStrat;
21     options[key] = strat(parent[key], child[key], vm, key);
22   }
23   return options
24 }

 1 function mergeAssets (
 2   parentVal: ?Object,
 3   childVal: ?Object,
 4   vm?: Component,
 5   key: string
 6 ): Object {
 7   const res = Object.create(parentVal || null)
 8   return res
 9 }
10 //ASSET_TYPES=['components','directives','filters'];
11 ASSET_TYPES.forEach(function (type) {
12   strats[type + 's'] = mergeAssets
13 })

1 strats.data = function (
2   parentVal: any,
3   childVal: any,
4   vm?: Component
5 ): ?Function {
6   return mergeDataOrFn(parentVal, childVal, vm)
7 }

 1 /**
 2  * Data
 3  */
 4 export function mergeDataOrFn (
 5   parentVal: any,
 6   childVal: any,
 7   vm?: Component
 8 ): ?Function {
 9   return function mergedInstanceDataFn () {
10     // instance merge
11     const instanceData = typeof childVal === 'function'
12       ? childVal.call(vm)
13       : childVal
14     const defaultData = typeof parentVal === 'function'
15       ? parentVal.call(vm)
16       : parentVal
17     if (instanceData) {
18       return mergeData(instanceData, defaultData)
19     } else {
20       return defaultData
21     }
22   }
23 }

 1 /**
 2  * Helper that recursively merges two data objects together.
 3  */
 4 function mergeData (to: Object, from: ?Object): Object {
 5   if (!from) return to
 6   let key, toVal, fromVal
 7   const keys = Object.keys(from)
 8   for (let i = 0; i < keys.length; i++) {
 9     key = keys[i]
10     toVal = to[key]
11     fromVal = from[key]
12     if (!hasOwn(to, key)) {
13       set(to, key, fromVal)
14     } else if (isPlainObject(toVal) && isPlainObject(fromVal)) {
15       mergeData(toVal, fromVal)
16     }
17   }
18   return to
19 }

 1 //主要给vm对象添加了$parent、$root、$children属性，以及一些其它的生命周期相关的标识。
 2 export function initLifecycle (vm: Component) {
 3   const options = vm.$options
 4
 5   // locate first non-abstract parent
 6   let parent = options.parent
 7
 8   vm.$parent = parent
 9   vm.$root = parent ? parent.$root : vm
10
11   vm.$children = []
12   vm.$refs = {}
13
14   vm._watcher = null
15   vm._inactive = null
16   vm._directInactive = false
17   vm._isMounted = false
18   vm._isDestroyed = false
19   vm._isBeingDestroyed = false
20 }

 1 export function initRender (vm: Component) {
 2   vm._vnode = null // the root of the child tree
 3   const options = vm.$options
 4   const parentVnode = vm.$vnode = options._parentVnode // the placeholder node in parent tree
 5   const renderContext = parentVnode && parentVnode.context
 6   vm.$slots = resolveSlots(options._renderChildren, renderContext)
 7   vm.$scopedSlots = emptyObject
 8   // bind the createElement fn to this instance
 9   // so that we get proper render context inside it.
10   // args order: tag, data, children, normalizationType, alwaysNormalize
11   // internal version is used by render functions compiled from templates
12   vm._c = (a, b, c, d) => createElement(vm, a, b, c, d, false)
13   // normalization is always applied for the public version, used in
14   // user-written render functions.
15   vm.$createElement = (a, b, c, d) => createElement(vm, a, b, c, d, true)
16 }

 1 export function initState (vm: Component) {
 2   vm._watchers = []
 3   const opts = vm.$options
 4   if (opts.props) initProps(vm, opts.props)
 5   if (opts.methods) initMethods(vm, opts.methods)
 6   if (opts.data) {
 7     initData(vm)
 8   } else {
 9     observe(vm._data = {}, true /* asRootData */)
10   }
11   if (opts.computed) initComputed(vm, opts.computed)
12   if (opts.watch && opts.watch !== nativeWatch) {
13     initWatch(vm, opts.watch)
14   }
15 }

 1 const mount = Vue.prototype.$mount
 2 /*
 3 * 判断是否有render函数，如果有直接处理。如果没有render函数，则生成render。
 4 *
 5 * */
 6 Vue.prototype.$mount = function (
 7   el?: string | Element,
 8   hydrating?: boolean
 9 ): Component {
10   el = el && query(el)
11
12   const options = this.$options
13   // resolve template/el and convert to render function
14   if (!options.render) {
15     let template = options.template
16     if (template) {
17       if (typeof template === 'string') {
18         if (template.charAt(0) === '#') {
19           template = idToTemplate(template)
20           /* istanbul ignore if */
21           if (process.env.NODE_ENV !== 'production' && !template) {
22             warn(
23               `Template element not found or is empty: ${options.template}`,
24               this
25             )
26           }
27         }
28       } else if (template.nodeType) {
29         template = template.innerHTML
30       } else {
31         if (process.env.NODE_ENV !== 'production') {
32           warn('invalid template option:' + template, this)
33         }
34         return this
35       }
36     } else if (el) {
37       template = getOuterHTML(el)
38     }
39     if (template) {
40
41       const { render, staticRenderFns } = compileToFunctions(template, {
42         shouldDecodeNewlines,
43         delimiters: options.delimiters,
44         comments: options.comments
45       }, this)
46       options.render = render
47       options.staticRenderFns = staticRenderFns
48     }
49   }
50   return mount.call(this, el, hydrating)
51 }

 1 /**
 2  * Get outerHTML of elements, taking care
 3  * of SVG elements in IE as well.
 4  */
 5 function getOuterHTML (el: Element): string {
 6   if (el.outerHTML) {
 7     return el.outerHTML
 8   } else {
 9     const container = document.createElement('div')
10     container.appendChild(el.cloneNode(true))
11     return container.innerHTML
12   }
13 }

 1 function baseCompile (
 2   template: string,
 3   options: CompilerOptions
 4 ): CompiledResult {
 5   const ast = parse(template.trim(), options)
 6   optimize(ast, options)
 7   const code = generate(ast, options)
 8   return {
 9     ast,
10     render: code.render,
11     staticRenderFns: code.staticRenderFns
12   }
13 }
14
15
16 export function createCompiler (baseOptions: CompilerOptions) {
17   const functionCompileCache: {
18     [key: string]: CompiledFunctionResult;
19   } = Object.create(null)
20
21   function compile (
22     template: string,
23     options?: CompilerOptions
24   ): CompiledResult {
25       ...
26     const compiled = baseCompile(template, finalOptions)
27     ...
28     return compiled
29   }
30
31   function compileToFunctions (
32     template: string,
33     options?: CompilerOptions,
34     vm?: Component
35   ): CompiledFunctionResult {
36     options = options || {}
37     ...
38     // compile
39     const compiled = compile(template, options)
40     ...
41     return (functionCompileCache[key] = res)
42   }
43
44   return {
45     compile,
46     compileToFunctions
47   }
48 }

{type: 1,tag: 'div',plain: false,parent: undefined,attrs: [{name:'id', value: '"app"'}],attrsList: [{name:'id', value: 'app'}],attrsMap: {id: 'app'},children: [{type: 1,tag: 'p',plain: true,parent: ast,attrs: [],attrsList: [],attrsMap: {},children: [{expression: "_s(message)",text: "{{message}}",type: 2}]
}

{type: 1,tag: 'div',plain: false,parent: undefined,attrs: [{name:'id', value: '"app"'}],attrsList: [{name:'id', value: 'app'}],attrsMap: {id: 'app'},static: false,staticRoot: false,children: [{type: 1,tag: 'p',plain: true,parent: ast,attrs: [],attrsList: [],attrsMap: {},static: false,staticRoot: false,children: [{expression: "_s(message)",text: "{{message}}",type: 2,static: false}]}

render = function () {with(this){return _c('div',{attrs:{"id":"app"}},[_c('p',[_v(_s(message))])])}
}

1 // public mount method
2 Vue.prototype.$mount = function (
3   el?: string | Element,
4   hydrating?: boolean
5 ): Component {
6   el = el && inBrowser ? query(el) : undefined
7   return mountComponent(this, el, hydrating)
8 }

 1 /*
 2 * (1)调用beforeMount钩子函数
 3 * (2)新建一个Watcher对象，绑定在vm._watcher上
 4 * (3)调用mounted钩子函数
 5 * */
 6 export function mountComponent (
 7   vm: Component,
 8   el: ?Element,
 9   hydrating?: boolean
10 ): Component {
11   vm.$el = el
12   //调用beforeMount钩子函数
13   callHook(vm, 'beforeMount')
14
15   let updateComponent
16   updateComponent = () => {
17     vm._update(vm._render(), hydrating)
18   }
19   //新建watcher对象，绑定在vm._watcher上
20   vm._watcher = new Watcher(vm, updateComponent, noop)
21   hydrating = false
22   // manually mounted instance, call mounted on self
23   // mounted is called for render-created child components in its inserted hook
24   if (vm.$vnode == null) {
25     vm._isMounted = true
26     callHook(vm, 'mounted')
27   }
28   return vm
29 }