Vue 是什么溜腐？
在每次初始化Vue瓜喇，使用 時(shí)，不難發(fā)現(xiàn)Vue其實(shí)是一個(gè)類(lèi)乘寒，通過(guò)層層追蹤終于找到Vue被定義的地方：
// src / core / instance / index.js
function Vue(options) {
...
this._init(options)
}
這就是Vue最初定義的地方，當(dāng)執(zhí)行 new Vue 時(shí)烂翰，內(nèi)部會(huì)執(zhí)行 this._init(options)，將初始化的參數(shù)傳入甘耿。
Vue源碼其實(shí)可以理解為一棵樹(shù)，我們看之前最好要確定看什么功能佳恬，然后避開(kāi)那些分叉邏輯姐呐，接下來(lái)從 new Vue() 開(kāi)始解析，走完一整條從初始化曙砂、數(shù)據(jù)劫持、模板編譯鸠澈、到真實(shí)的DOM整個(gè)流程。
在Vue內(nèi)部笑陈，_符號(hào)開(kāi)頭定義的變量是供內(nèi)部私有使用的，而$符號(hào)開(kāi)頭定義的變量是供用戶(hù)使用的涵妥，而用戶(hù)自定義的變量不能以_和$開(kāi)頭，防止內(nèi)部沖突。
接著看Vue實(shí)例創(chuàng)建：
// src / core / instance / index.js
import { initMixin } from './init'
import { stateMixin } from './state'
import { renderMixin } from './render'
import { eventsMixin } from './events'
import { lifecycleMixin } from './lifecycle'
function Vue(options) {
...
this._init(options)
}
initMixin(Vue)
stateMixin(Vue)
eventsMixin(Vue)
lifecycleMixin(Vue)
renderMixin(Vue)
可以看到 Vue 是通過(guò) ES5 構(gòu)造函數(shù)創(chuàng)建鹉勒，為什么不使用 ES6 class 類(lèi)來(lái)創(chuàng)建呢？網(wǎng)上許多回答是：因?yàn)檫@樣可以方便的把 Vue 的功能拆分到不同目錄中去維護(hù)禽额，將Vue構(gòu)造函數(shù)傳入這些方法中，來(lái)給Vue原型上擴(kuò)展方法脯倒。但目前個(gè)人認(rèn)為兩種方式?jīng)]有區(qū)別。
- initMixin(Vue)：定義_init方法藻丢。
- stateMixin(Vue)：定義數(shù)據(jù)相關(guān)的方法$set,$delete,$watch方法讯沈。
- eventsMixin(Vue)：定義事件相關(guān)的方法$on，$once缺狠，$off，$emit挤茄。
- lifecycleMixin(Vue)：定義_update，及生命周期相關(guān)的$forceUpdate和$destroy穷劈。
- renderMixin(Vue)：定義$nextTick笼恰，_render將render函數(shù)轉(zhuǎn)為vnode社证。
這些方法都是在各自的文件內(nèi)維護(hù)的，從而讓代碼結(jié)構(gòu)更加清晰易懂可維護(hù)追葡。如this._init方法被定義在：
export function initMixin(Vue) {
Vue.prototype._init = function(options) {
...當(dāng)執(zhí)行new Vue時(shí)，進(jìn)行一系列初始化并掛載
}
}
這些xxxMixin完成后宜肉，接著會(huì)定義一些全局的API：
export function initGlobalAPI(Vue) {
Vue.set方法
Vue.delete方法
Vue.nextTick方法
...
內(nèi)置組件：
keep-alive
transition
transition-group
...
initUse(Vue)：Vue.use方法
initMixin(Vue)：Vue.mixin方法
initExtend(Vue)：Vue.extend方法
initAssetRegisters(Vue)：Vue.component，Vue.directive谬返，Vue.filter方法
}
可以看到Vue的設(shè)計(jì)架構(gòu)是分層次的日杈，最底層是一個(gè)ES5構(gòu)造函數(shù)佑刷，再上層在原型上會(huì)定義一些_init、$watch项乒、_render等這樣的方法啰劲，再上層會(huì)在構(gòu)造函數(shù)自身定義全局的一些API梁沧，如set廷支、nextTick、use等(以上這些是不區(qū)分平臺(tái)的核心代碼)恋拍，接著是跨平臺(tái)和服務(wù)端渲染(這些暫時(shí)不在討論范圍)及編譯器。將這些屬性方法都定義好了之后施敢，最后會(huì)導(dǎo)出一個(gè)完整的構(gòu)造函數(shù)給到用戶(hù)使用，而new Vue就是啟動(dòng)的鑰匙僵娃。
目錄結(jié)構(gòu)
|-- dist 打包后的vue版本
|-- flow 類(lèi)型檢測(cè)，3.0換了typeScript
|-- script 構(gòu)建不同版本vue的相關(guān)配置
|-- src 源碼
|-- compiler 編譯器
|-- core 不區(qū)分平臺(tái)的核心代碼
|-- components 通用的抽象組件
|-- global-api 全局API
|-- instance 實(shí)例的構(gòu)造函數(shù)和原型方法
|-- observer 數(shù)據(jù)響應(yīng)式
|-- util 常用的工具方法
|-- vdom 虛擬dom相關(guān)
|-- platforms 不同平臺(tái)不同實(shí)現(xiàn)
|-- server 服務(wù)端渲染
|-- sfc .vue單文件組件解析
|-- shared 全局通用工具方法
|-- test 測(cè)試
- flow：javaScript是弱類(lèi)型語(yǔ)言默怨，使用flow以定義類(lèi)型和檢測(cè)類(lèi)型骤素，增加代碼的健壯性。
- src/compiler：將template模板編譯為render函數(shù)济竹。
- src/core：與平臺(tái)無(wú)關(guān)通用的邏輯，可以運(yùn)行在任何javaScript環(huán)境下送浊，如web、Node.js罕袋、weex嵌入原生應(yīng)用中。
- src/platforms：針對(duì)web平臺(tái)和weex平臺(tái)分別的實(shí)現(xiàn)浴讯，并提供統(tǒng)一的API供調(diào)用。
- src/observer：vue檢測(cè)數(shù)據(jù)數(shù)據(jù)變化改變視圖的代碼實(shí)現(xiàn)仰猖。
- src/vdom：將render函數(shù)轉(zhuǎn)為vnode從而patch為真實(shí)dom以及diff算法的代碼實(shí)現(xiàn)捏肢。
- dist：存放著針對(duì)不同使用方式的不同的vue版本鸵赫。
Vue 構(gòu)建版本
vue使用的是rollup構(gòu)建的，按照使用方式的不同辩棒，可以分為以下三類(lèi)：
- UMD：通過(guò) <script> 標(biāo)簽直接在瀏覽器中使用
- CommonJS：Node 的模塊方式
- ES Module：ES6的模塊導(dǎo)入方式
在vue的內(nèi)部是只認(rèn)render函數(shù)的，我們來(lái)自己定義一個(gè)render函數(shù)
new Vue({
data: {
msg: 'hello Vue!'
},
render(h) {
return h('span', this.msg);
}
}).$mount('#app');
可能有人會(huì)納悶了一睁，既然只認(rèn)render函數(shù)，同時(shí)我們開(kāi)發(fā)好像從來(lái)并沒(méi)有寫(xiě)過(guò)render函數(shù)者吁，而是使用的template模板。這是因?yàn)橛衯ue-loader复凳，它會(huì)將我們?cè)趖emplate內(nèi)定義的內(nèi)容編譯為render函數(shù)，而這個(gè)編譯就是區(qū)分完整版和運(yùn)行時(shí)版本的關(guān)鍵所在育八，完整版就自帶這個(gè)編譯器，而運(yùn)行時(shí)版本就沒(méi)有单鹿，如下面這段代碼如果是在運(yùn)行時(shí)版本環(huán)境下就會(huì)報(bào)錯(cuò)了：
new Vue({
data: {
msg: 'hello Vue!'
},
template: `<div>{{msg}}</div>`
})
vue-cli默認(rèn)是使用運(yùn)行時(shí)版本的，更改或覆蓋腳手架內(nèi)的默認(rèn)配置仲锄，將其更改為完整版即可通過(guò)編譯：'vue$': 'vue/dist/vue.esm.js'湃鹊，推薦還是使用運(yùn)行時(shí)版本
這里涉及到一個(gè)常被問(wèn)到的面試題：
請(qǐng)問(wèn) runtime compiler 和 runtime-only 這兩個(gè)版本的區(qū)別？
- 文件大小的區(qū)別币呵，帶編譯的版本要比不帶的版本文件要大6kb左右
- 編譯時(shí)機(jī)不同：編譯運(yùn)行時(shí)版本會(huì)在運(yùn)行時(shí)進(jìn)行編譯，性能會(huì)有一定損耗余赢；運(yùn)行時(shí)版本借助于 vue-loader 做的離線(xiàn)編譯，運(yùn)行速度更快妻柒。
