>[success] # Vue 實例做了什么 ~~~ 1.讀整個源碼之前，在上一個章節我們已經明確了入口，另外一種明確入口思路是根據生命周期圖， 可以發現整個'vue' 運行開始都在這個'new Vue'創建實例時候，因此我們需要找到'Vue'這個構造函數 2.也可以通過簡暴力的方法在'vue\dist\vue.esm.js' 的文件夾中，直接搜Vue 的構造函數 ~~~  >[info] ## vue.esm.js 里的Vue構造函數 ~~~ 1.當找到'vue'構造函數代碼如下，其實發現在Vue 構造函數中執行了一個'_init' 的方法，這個方法經過 定位后其實不難發現，他是通過'initMixin'方法 在vue 原型鏈上加入的 2.在上一個章節分析的時候，實際已經找到了'vue.esm.js'生成前打包對應的入口， 也找到了'Vue構造函數在打包前聲明的文件位置':'src\core\instance\index.js' ,在這個文件里也發現了一個'initMixin'方法，該方法在'src\core\instance\init.js' ~~~ * vue.esm.js 找到的代碼片段如下 ~~~ 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); ~~~ >[danger] ##### 分析 initMixin 方法做了什么 ~~~ 1.找到在'src\core\instance\init.js' 'initMixin'的方法 2.'initMixin'就做了一件事情，在Vue的原型上增加_init方法，構造Vue實例的時候會調用這個 '_init'方法來初始化'Vue'實例 2.可以在代碼中看到，在初始化的時候一并做了這些操作 initLifecycle(vm) // 初始化生命周期 initEvents(vm) // 初始化事件 initRender(vm) // 初始化渲染 callHook(vm, 'beforeCreate') // 調用生命周期鉤子函數 initInjections(vm) //初始化injections initState(vm) // 初始化props,methods,data,computed,watch initProvide(vm) // 初始化 provide callHook(vm, 'created') // 調用生命周期鉤子函數 ~~~ ~~~js initMixin (Vue: Class<Component>) { Vue.prototype._init = function (options?: Object) { const vm: Component = 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 // merge options if (options && options._isComponent) { // 優化內部組件實例化 // 因為動態選項合并非常慢，而且 // 內部組件選項需要特殊處理。 initInternalComponent(vm, options) } else { vm.$options = mergeOptions( resolveConstructorOptions(vm.constructor), options || {}, vm ) } /* istanbul ignore else */ if (process.env.NODE_ENV !== 'production') { initProxy(vm) } else { vm._renderProxy = vm } // expose real self vm._self = vm initLifecycle(vm) // 初始化生命周期 initEvents(vm) // 初始化事件 initRender(vm) // 初始化渲染 callHook(vm, 'beforeCreate') // 調用生命周期鉤子函數 initInjections(vm) //初始化injections initState(vm) // 初始化props,methods,data,computed,watch initProvide(vm) // 初始化 provide 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) } if (vm.$options.el) { vm.$mount(vm.$options.el) } } } ~~~ >[danger] ##### 簡單總結 ~~~js 1.vue 在構造函數內部調用 `_init`方法 2.`_init` 方法是在`initMixin`方法里面定義的 3.`initMixin`方法里面做了如下事情: 3.1`initLifecycle(vm)`// 初始化生命周期 3.2.`initEvents(vm)`// 初始化事件 3.3.`initRender(vm)`// 初始化渲染 3.4.`callHook(vm, 'beforeCreate')` // 調用生命周期鉤子函數 3.5.`initInjections(vm)` //初始化injections 3.6.`initState(vm)` // 初始化props,methods,data,computed,watch 3.7.`initProvide(vm)` // 初始化 provide 3.8.`callHook(vm, 'created')` // 調用生命周期鉤子函數 4.最后調用了`$mount`掛載的目標就是把模板渲染成最終的 DOM ~~~