vue源碼解析-new Vue

廢話很少說,直接進入正題。vue

在源碼 src/core/instance/index.js 文件node


從源碼能夠看出在new的時候,就是在實例化一個Vue對象。Vue這個函數最後是調用了 this._init() 這個方法,這個方法在src/core/instance/init.js裏面定義dom


從源碼能夠看出this._init()方法主要執行了如下幾個部分函數

  1. this._init()方法先初始化一些參數,如:uid
  2. 合併options配置,能夠經過vm.$options.el等訪問到建立實例時傳入的option
  3. 初始化各類函數,初始化生命週期,初始化事件中心,初始化data,初始化props,computed,watcher等

判斷實例是否存在vm.$options.el,存在的話,執行$mount方法,將vm掛載到dom節點上。ui

通過這一步,頁面就會從 {{ message }}變爲 ’hello vue‘。主要流程是el、template->render表達式->Vnode->DOMthis

相關文章
相關標籤/搜索