Vue 的源碼結構比較繞，同時使用了大量的面向對象的高級技巧。重寫方法，擴展方法，多態等應用。從 Vue 實例的加載過程就可以看出來，這一節重點看看 Vue 的源碼加載流程是什么。

前言

vue已是目前國內前端web端三分天下之一，同時也作為本人主要技術棧之一，在日常使用中知其然也好奇著所以然，另外最近的社區涌現了一大票vue源碼閱讀類的文章。在下借這個機會從大家的文章和討論中汲取了一些營養，同時對一些閱讀源碼時的想法進行總結，出產一些文章，作為自己思考的總結。

前備知識

• Flow
• ES6語法
• 常用的設計模式
• 柯里化等函數式編程思想

一、vue簡介和初始化過程

vue的源碼結構如下：

A.compiler 編譯用的

a.vue 使用字符串作為模板

b.在編譯文件夾中存放對 模板字符串的 解析的算法, 抽象語法樹, 優化等

B.core 核心, vue 構造函數, 以及生命周期等方法的部分

C.platforms 平臺

a.針對運行的環境 ( 設備 ), 有不同的實現

b.也是 vue 的入口

D.server 服務端, 主要是將 vue 用在服務端的處理代碼 ( 略 )

E.sfc, 單文件組件 ( 略 )

F.在編譯文件夾中存放對 模板字符串的 解析的算法, 抽象語法樹, 優化等shared 公共工具, 方法

二、Vue對象

在使用vue時我們知道都是使用new Vue(),來將vue的實例掛載到dom對象上從而運用數據驅動的方式來擴展我們的代碼，我們首先來看一下Vue的定義

從源頭上看來自core目錄下的index.js文件

在js中一切皆函數，其實Vue就是一個函數，在初始化的時候執行原型鏈上的_init方法，vue沒有把所有的方法都寫在函數內部，這樣從代碼上來說，每次實例化的時候不會生成重復的代碼。

主要還是代碼結構更清晰，利用mixin的概念，把每個模塊都抽離開，這樣代碼在結構和擴展性都有很大提高，這里的每個mixin先不說，先看以一下整體結構，這里定義完還要被core里的index.js再次包裝調用initGlobalAPI(Vue)來初始化全局的api方法。

在web下runtime文件夾下引用再次封裝，vue是分為運行時可編譯和只運行的版本，所以如果需要編譯，在Vue原型上添加了$mount方法。

三、運行機制

當我們在 main.js 里 new Vue( ) 后，Vue 會調用構造函數的 _init( ) 方法，這個方法是位于 core/instance/index.js 的 initMixin( ) 方法中定義的

我們可以看看 init( ) 這個方法到底進行了哪些初始化：

這里 _init() 方法中會對當前 vm 實例進行一系列初始化設置，比較重要的是初始化 State 的方法 initState(vm) 的時候進行 data/props 的響應式化，這就是傳說中的通過 Object.defineProperty() 方法對需要響應式化的對象設置 getter/setter，以此為基礎進行依賴搜集(Dependency Collection)，達到數據變化驅動視圖變化的目的。

最后檢測 vm.$options 上面有沒有 el 屬性，如果有的話使用 vm.$mount 方法掛載 vm，形成數據層和視圖層的聯系。這也是如果沒有提供 el 選項就需要自己手動 vm.$mount('#app') 的原因。

我們看到 created 鉤子是在掛載 $mount 之前調用的，所以我們在 created 鉤子觸發之前是無法操作 DOM 的，這是因為還沒有渲染到 DOM 上。

四、總結

一張圖看一下整個流程

總結

以上是生活随笔為你收集整理的vue 初始化方法_前端发展方向指南—Vue源码初始化的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。