跟着源碼學習VUE之上手

跟着源碼學習VUE之上手

流程

這邊的代碼流程不細講。網上有人講的很細了。想細緻瞭解的推薦閱讀
VUE2.1.7源碼學習
這裏面已經講解的很細緻了。
須要注意的是 我看的 2.5.17版本中有些變更
在 init.js 中 initRender方法放到了initState前面執行。

這邊的講解也有點問題。具體問題看下面

梳理

這邊的流程咱們能夠分爲兩大部分

準備構造函數Vue.

構造函數Vue是個很簡單的函數

// instance/index.js
function Vue (options) {
  // ... 省略環境判斷代碼
  this._init(options)
}
initMixin(Vue)
stateMixin(Vue)
eventsMixin(Vue)
lifecycleMixin(Vue)
renderMixin(Vue)

它自己(ownProperty)不具有任何屬性和方法。

構建好以後經過五個Mixin在Vue原型鏈上添加一系列方法。而這些方法Vue的實例是公用的。

由於構造函數自己也是對象，能夠給這個對象定義屬性。所以在initGlobalAPI中給Vue添加了全局API。

經常使用的Vue.use, Vue.extend均可以在這邊找到。

實例化對象

構造函數準備好以後就實例化對象。就像上面說的，Vue自己很簡單。

function Vue (options) {
  // ... 省略環境判斷代碼
  this._init(options)
}

當咱們 new Vue()時，也是經歷了這幾步

1. Object.create()。 建立一個新的plainObject.
2. 關聯原型鏈。
3. 指定上下文。即this爲第一步實例化出來的空對象。
4. 執行構造函數。

能夠看到，其實第三步時咱們就已經拿到了實例對象（即大名鼎鼎的this）。
第四步，執行構造函數其實就是執行this._init。這邊的_init是準備構造函數時經過initMixin添加到原型鏈上的。所以能夠直接拿到。

最重要的加載流程

其實對於咱們使用Vue來講，最關心的也仍是這邊。這邊代碼主要在instance/init.js中。其實我感受這邊也能夠分紅兩部分。

在$mount以前都是給實例化對象添加屬性和方法。而後執行$mount方法。
這也是我說上面的說法不對的地方。

對於initRender來講。她並沒說構建DOM，虛擬DOM也沒有。只是給this添加了render時會用到的方法。

好比最主要的creatElement等。所以哪怕created不能操做DOM與initRender位置無關。
最後執行mount纔會真正生成虛擬DOM。obsever date.計算computed等一系列操做。

掛載

接着咱們大概看一下掛載操做都作了什麼。
你可能會很奇怪，上面列出來的方法裏並無$Mount。這是由於上面列的是從runtime/index.js裏導出的Vue。而真正是用的Vue函數式通過entry-runtime-with-compiler.js包裝過的。這裏就定義了原型鏈上的$mount方法。

這段代碼其實就是作了一件事，若是看看有沒有render方法，若是沒有，則根據template生成對應的render方法，並保存在options中。