new vue 實例發生了什么呢？

前言

　　最近全面栽進vue源碼解析中，將出一系列的學習筆記 以及個人的一些總結

 

1. 第一步准備工作
   1. 到GitHub上下載vue的源碼（巧婦難為無米之炊）
   2. 用自己喜歡的編輯器打開源碼
   3. vue主要源碼資源在src文件中
   4. 放一張很流行解說vue數據響應式的圖兒
2. 第二步認識目錄結構
3. 第三步一回只理清一條線 (這次我們主要是理清new vue 實例 vue 做了哪些工作)
   1. vue 用 flow 靜態類型檢查（flow是如何工作的呢 可以上官網看看）
   2. vue 用 rollup 構建 （為什么不用webpack ？）
   3. 用腳手架（vue-cli）寫demo （new vue 實例）
   4. 在index.js 中有定義 vue 函數（src/core/instance/index.js 源碼路徑）

   5. mport { initMixin } from './init'
      import { stateMixin } from './state'
      import { renderMixin } from './render'
      import { eventsMixin } from './events'
      import { lifecycleMixin } from './lifecycle'
      import { warn } from '../util/index'
      /*Github:https://github.com/answershuto*/
      function Vue (options) { //vue 函數
        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

       

   6. 初始化inti函數 定義了 _inti(src/core/instance/inti.js 源碼路徑)
   7. 在inti 很重要的是合並了options(你在new vue 實例傳的參數) 
   8. mergeOptions主要調用兩個方法，resolveConstructorOptions和mergeOptions。(實例化組件還是實例化對象)
   9. 合並options 后檢查 是否有el (肯定不陌生 el:'#app')

      if (vm.$options.el) {
            /*掛載組件*/
            vm.$mount(vm.$options.el)
          }

   10. 迎來很重要的函數 $mount （重點記下這個函數）
   11. 掛載后 打開瀏覽器頁面 打開調試工具 查看dom結構
   12. 可以看到el對應的dom

 

Fannie式總結

本章的結構我覺得已經是非常的清晰了 

$mount 函數具體又做了什么？請聽下回分解

跟着我 突破vue源碼坑