Yiming君的VUE世界觀

原由

最近終於學會了作圖和排版的技巧，如今反過頭去看以前寫的文章，唔！辣眼睛，真想給本身一巴掌，以前寫的是什麼玩意~

可是，寫都寫了，總不能刪了吧，只好將來會出一個系列再把以前寫的內容給串起來（嗯，又是一項大工程，習慣了本身挖坑本身跳）

以前寫過一篇關於Vue源碼的文章，但時隔一個月再看，不管是排版仍是對源碼的理解都不盡人意，因此此次但願能把結構寫的好看點，但願能幫助到你們

從new Vue開始

我先貼一下我當前的版本號：vue@2.6.11，目錄地址：vue\src\core\instance\index.js，這個文件中的代碼不是不少，僅僅幾行，我也都加上了註釋：

那麼Ctrl + 左鍵點擊下面的initMixin(Vue)，咱們就能夠看到上面this._init(options)的廬山真面目了，那麼這裏繼續以註釋的形式進行說明：

到這裏都挺好理解的，接下來就是要準備進行掛載DOM，但在掛載前須要生成虛擬DOM，你們應該知道爲何須要虛擬DOM，不過我這裏仍是寫一下，以防本身之後忘記了：每一個DOM元素上有很是多的屬性，若是每次對DOM進行操做，那麼瀏覽器就須要反覆的操做DOM，也就至關於操做這麼多的屬性，丟一張圖讓你們感覺一下，每一個DOM元素的屬性是何其的恐怖如斯

而虛擬DOM只須要實現必要的屬性便可，再配合diff算法，從而高效的更新頁面。

回到剛纔的$mount，它的目錄是：vue\src\platforms\web\runtime\index.js

mountComponent

這個函數很是重要，它負責掛載組件：

走到這裏，最重要的mount階段就走完了，辛苦看到這裏的朋友！因此我要放一波美圖，讓你們緩緩眼睛：

總結一

經過以上的內容，咱們知道了幾個常見面試題的答案：

• 不能在beforeCreate的時候發起網絡請求，由於沒法存入data，因此也沒法雙向數據綁定，可是created鉤子能夠
• 只能在mounted生命週期中訪問DOM，由於mountComponent函數在beforeMount鉤子後、mounted前調用
• Vue中一個組件對應一個Watcher，從Watcher代理執行updateComponent方法就能夠看出，一個Watcher代替執行一個updateComponent方法

接下來看看，Vue 2.X數據驅動視圖的原理，咱們得回到initState中initData的那段

接着咱們就被帶領到了observe函數中，它又會調用Observer構造函數，它會對傳入的數值進行判斷，數組特殊處理：

咱們重點看this.walk方法吧：

簡化以後的代碼以下：

後續另開一篇關於數據響應式處理的文章，由於有太多能夠深究的點了~

總結二

經過上面的代碼咱們瞭解到Vue對數據的處理，細節部分後續結合面試題來寫，這樣你們應該看的會更加起勁

在new Vue後，代碼執行到initState，接着觸發initData，最後調用Observer構造函數進行數據綁定，其中會對數組進行特殊處理。經過Object.defineProperty遞歸遍歷，在遍歷的過程當中收集依賴，讓渲染Watcher和當前的數據關聯，直到全部數據被處理完畢。這裏還能夠繼續深究，不過上面已經說啦，後面會結合面試題一塊兒來說

最後給你們放一張腦圖，不過不是什麼大製做，只是對這篇文章的總結，不過會隨着文章的不斷深刻而豐富

腦圖放送

本文使用 mdnice 排版