前言
本篇為學(xué)習(xí)筆記孽拷，記錄在慕課vue.js源碼解析教學(xué)視頻中學(xué)習(xí)到的知識(shí)。
一斩个、準(zhǔn)備工作
? 在本章節(jié),將會(huì)介紹vue的一些前置知識(shí)胯杭， 如 flow、源碼目錄受啥、構(gòu)建方式做个、編譯入口鸽心。
1.Flow
1.1簡(jiǎn)介
? js的靜態(tài)類型檢查工具。js-> 動(dòng)態(tài)類型語(yǔ)言: 靈活居暖，易有隱患代碼顽频。flow->編譯期發(fā)現(xiàn)由類型錯(cuò)誤引起的bug -> 使編寫 JS 具有和編寫 Java 等強(qiáng)類型語(yǔ)言相近的體驗(yàn)。
1.2工作方式
- 類型推斷
- 類型注釋
類型推斷
? 自動(dòng)推斷變量類型
function split(str) {
return str.split(' ')
}
split(11)
? flow檢查以上代碼會(huì)報(bào)錯(cuò)太闺， 因?yàn)閚umber類型沒(méi)有split方法糯景。
類型注釋
? 根據(jù)注釋來(lái)檢查
function add(x: number, y: number): number {
return x + y
}
add('Hello', 11)
? flow檢查以上代碼會(huì)報(bào)錯(cuò)， 因?yàn)橹付藊是number省骂。
P.S. 其他注釋聲明格式
- 數(shù)字?jǐn)?shù)組 var arr:Array<number> = []
- 類和對(duì)象
class People {
name: string;
age: number | string;
constructor( name: string, age: number | string){
this.name = name
this.age = age
}
}
var nadia = new People("nadia",27)
var house:{address:string, price:number,houseOwner:People} = {
address : "河北省唐山市xxx",
price：100,
houseOwner： new People("nadia",27),
}
2. Vue.js源碼目錄設(shè)計(jì)
src
├─dist # 項(xiàng)目構(gòu)建后的文件
├─scripts # 與項(xiàng)目構(gòu)建相關(guān)的腳本和配置文件
├─flow # flow的類型聲明文件
├─src # 項(xiàng)目源代碼
│ ├─complier # 與模板編譯相關(guān)的代碼
│ ├─core # 通用的蟀淮、與運(yùn)行平臺(tái)無(wú)關(guān)的運(yùn)行時(shí)代碼
│ │ ├─observe # 實(shí)現(xiàn)變化偵測(cè)的代碼
│ │ ├─vdom # 實(shí)現(xiàn)virtual dom的代碼
│ │ ├─instance # Vue.js實(shí)例的構(gòu)造函數(shù)和原型方法
│ │ ├─global-api # 全局api的代碼
│ │ └─components # 內(nèi)置組件的代碼
│ ├─server # 與服務(wù)端渲染相關(guān)的代碼
│ ├─platforms # 特定運(yùn)行平臺(tái)的代碼，如weex
│ ├─sfc # 單文件組件的解析代碼
│ └─shared # 項(xiàng)目公用的工具代碼
└─test # 項(xiàng)目測(cè)試代碼
2.1 compiler
Vue.js編譯相關(guān)代碼钞澳。包括1.模板解析成ast語(yǔ)法樹(shù)2.ast語(yǔ)法樹(shù)優(yōu)化3.代碼生成etc怠惶。
ast語(yǔ)法樹(shù)簡(jiǎn)介可參考https://blog.csdn.net/philosophyatmath/article/details/38170131
建議離線編譯轧粟， 即在構(gòu)建時(shí)借助webpack策治，vue-loader等輔助插件編譯。
2.2 core
核心代碼兰吟， 包括
- 內(nèi)置組件
- 全局API封裝
- Vue實(shí)例化
- 觀察者
- 虛擬dom
- 工具函數(shù) ect
2.3 platform
Vue.js是一個(gè)跨平臺(tái)的MVVM框架通惫， 可以跑在web上， 也可以配合weex跑在native客戶端上揽祥。
本學(xué)習(xí)筆記重點(diǎn)分析web入口打包后的vue.js
2.4 server
Vue.js 2.0 支持了服務(wù)端渲染，所有服務(wù)端渲染相關(guān)的邏輯都在這個(gè)目錄下拄丰。注意：這部分代碼是跑在服務(wù)端的 Node.js府树，不要和跑在瀏覽器端的 Vue.js 混為一談。
服務(wù)端渲染主要的工作是把組件渲染為服務(wù)器端的 HTML 字符串料按，將它們直接發(fā)送到瀏覽器奄侠，最后將靜態(tài)標(biāo)記"混合"為客戶端上完全交互的應(yīng)用程序。
2.5 sfc
解析相關(guān)代碼载矿，把vue文件內(nèi)容解析為js對(duì)象
2.6 shared
一些工具方法垄潮，這里定義的工具方法都是會(huì)被瀏覽器端的 Vue.js 和服務(wù)端的 Vue.js 所共享的。
3. Vue.js源碼構(gòu)建
Vue.js源碼基于rollup構(gòu)建闷盔，構(gòu)建相關(guān)的代碼在script文件夾下弯洗。
3.1 構(gòu)建腳本
代碼詳見(jiàn)package.json
