Vue源碼分析(1)--源碼組成結(jié)構(gòu)分析

本系列分析的Vue.js版本是: v2.2.6泄伪,可在vue-dev倉庫的dist/vue.js找到源碼初嘹。

1刨晴、整體結(jié)構(gòu)


(function (global, factory) {

typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :

typeof define === 'function' && define.amd ? define(factory) :

(global.Vue = factory());

}(this, (function () {主要源碼部分 })));

在瀏覽器端執(zhí)行等價于


//這個factory就是傳入的最后那個匿名函數(shù),注意該匿名函數(shù)并沒自執(zhí)行

window.Vue=factory()

匿名函數(shù)最終返回一個Vue$3構(gòu)造函數(shù),所以上面代碼實(shí)際執(zhí)行


window.Vue=Vue$3;

來看下這個匿名函數(shù)蓬抄,即factory執(zhí)行期間做了哪些事(未指明的行數(shù)大部分都是工具類函數(shù)定義,在此省略夯到,等調(diào)用到再看)

  • 261行 config對象

  • 451行 實(shí)現(xiàn)nextTick函數(shù)

  • 616-660 實(shí)現(xiàn) Dep類

  • 721-948 實(shí)現(xiàn)Observer類

  • 1463-1533 實(shí)現(xiàn)initProxy類

  • 1560-1737 實(shí)現(xiàn)VNode類嚷缭,虛擬DOM相關(guān)

  • 2461-2607 實(shí)現(xiàn)Watcher類

  • 3841 實(shí)現(xiàn)Vue$3類

  • 3848-3852 分別調(diào)用如下函數(shù),作用是給Vue$3的原型添加一系列方法和屬性:


initMixin(Vue$3);

stateMixin(Vue$3);

eventsMixin(Vue$3);

lifecycleMixin(Vue$3);

renderMixin(Vue$3);

  • 4166 調(diào)用initGlobalAPI(Vue$3)黄娘,作用是給Vue$3添加靜態(tài)方法和屬性;

  • 7236-7237 調(diào)用如下函數(shù)峭状,作用是添加平臺特有的指令和組件


extend(Vue$3.options.directives, platformDirectives);

extend(Vue$3.options.components, platformComponents);

  • 接下來看這些函數(shù)執(zhí)行期間對Vue$3做了什么事情(以下Vue$3作為參數(shù)傳給Vue,所以是同一引用)

2逼争、initMixin(Vue$3)


Vue.prototype._init = function (options?: Object) {}

3优床、stateMixin(Vue$3)


Vue.prototype.$data

Vue.prototype.$set = set

Vue.prototype.$delete = del

Vue.prototype.$watch = function(){}

4、eventsMixin(Vue$3)


Vue.prototype.$on = function (event: string, fn: Function): Component {}

Vue.prototype.$once = function (event: string, fn: Function): Component {}

Vue.prototype.$off = function (event?: string, fn?: Function): Component {}

Vue.prototype.$emit = function (event: string): Component {}

5誓焦、lifecycleMixin(Vue$3)


Vue.prototype._mount = function(){}

Vue.prototype._update = function (vnode: VNode, hydrating?: boolean) {}

Vue.prototype._updateFromParent = function(){}

Vue.prototype.$forceUpdate = function () {}

Vue.prototype.$destroy = function () {}

6胆敞、renderMixin(Vue$3)


Vue.prototype.$nextTick = function (fn: Function) {}

Vue.prototype._render = function (): VNode {}

Vue.prototype._s = _toString

Vue.prototype._v = createTextVNode

Vue.prototype._n = toNumber

Vue.prototype._e = createEmptyVNode

Vue.prototype._q = looseEqual

Vue.prototype._i = looseIndexOf

Vue.prototype._m = function(){}

Vue.prototype._o = function(){}

Vue.prototype._f = function resolveFilter (id) {}

Vue.prototype._l = function(){}

Vue.prototype._t = function(){}

Vue.prototype._b = function(){}

Vue.prototype._k = function(){}

7、initGlobalAPI(Vue$3)


Vue.config

Vue.util = util

Vue.set = set

Vue.delete = del

Vue.nextTick = util.nextTick

Vue.options = {

components: {

KeepAlive

},

directives: {},

filters: {},

_base: Vue

}

Vue.use

Vue.mixin

Vue.cid = 0

Vue.extend

Vue.component = function(){}

Vue.directive = function(){}

Vue.filter = function(){}

Vue.prototype.$isServer

Vue.version = '__VERSION__'

8杂伟、extend()


Vue.options = {

components: {

KeepAlive,

Transition,

TransitionGroup

},

directives: {

model,

show

},

filters: {},

_base: Vue

}

9移层、本節(jié)收獲:

  • Vue自帶指令只有2個:v-show,v-model;其他的如v-if屬于程序編譯時產(chǎn)生赫粥;
  • Vue自帶組件只有3個:keep-alive观话,transition,transition-group越平;可以通過Vue.component動態(tài)添加频蛔;
  • Vue的初始化過程本質(zhì)上是一個完善和豐富Vue類的過程,即給Vue及其原型添加一些屬性和方法(API)

最后:可能有的人不太喜歡看構(gòu)建后的源碼秦叛,而喜歡看構(gòu)建前的代碼晦溪,這里推薦一篇寫的比較好的對vue-dev構(gòu)建過程以及整體結(jié)構(gòu)分析都寫的比較好的文章,本文也有部分參考挣跋,地址在這:

vue2源碼構(gòu)建過程分析

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末三圆,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子避咆,更是在濱河造成了極大的恐慌舟肉,老刑警劉巖,帶你破解...
    沈念sama閱讀 222,807評論 6 518
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件牌借,死亡現(xiàn)場離奇詭異度气,居然都是意外死亡,警方通過查閱死者的電腦和手機(jī)膨报,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 95,284評論 3 399
  • 文/潘曉璐 我一進(jìn)店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人现柠,你說我怎么就攤上這事院领。” “怎么了够吩?”我有些...
    開封第一講書人閱讀 169,589評論 0 363
  • 文/不壞的土叔 我叫張陵比然,是天一觀的道長。 經(jīng)常有香客問我周循,道長强法,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 60,188評論 1 300
  • 正文 為了忘掉前任湾笛,我火速辦了婚禮饮怯,結(jié)果婚禮上亡容,老公的妹妹穿的比我還像新娘雨女。我一直安慰自己褥芒,他們只是感情好室埋,可當(dāng)我...
    茶點(diǎn)故事閱讀 69,185評論 6 398
  • 文/花漫 我一把揭開白布悔耘。 她就那樣靜靜地躺著诫惭,像睡著了一般驮宴。 火紅的嫁衣襯著肌膚如雪沛简。 梳的紋絲不亂的頭發(fā)上杆勇,一...
    開封第一講書人閱讀 52,785評論 1 314
  • 那天贪壳,我揣著相機(jī)與錄音,去河邊找鬼蚜退。 笑死闰靴,一個胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的关霸。 我是一名探鬼主播传黄,決...
    沈念sama閱讀 41,220評論 3 423
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼队寇!你這毒婦竟也來了膘掰?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 40,167評論 0 277
  • 序言:老撾萬榮一對情侶失蹤佳遣,失蹤者是張志新(化名)和其女友劉穎识埋,沒想到半個月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體零渐,經(jīng)...
    沈念sama閱讀 46,698評論 1 320
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡窒舟,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 38,767評論 3 343
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了诵盼。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片惠豺。...
    茶點(diǎn)故事閱讀 40,912評論 1 353
  • 序言:一個原本活蹦亂跳的男人離奇死亡银还,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出洁墙,到底是詐尸還是另有隱情蛹疯,我是刑警寧澤,帶...
    沈念sama閱讀 36,572評論 5 351
  • 正文 年R本政府宣布热监,位于F島的核電站捺弦,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏孝扛。R本人自食惡果不足惜列吼,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 42,254評論 3 336
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望苦始。 院中可真熱鬧寞钥,春花似錦、人聲如沸盈简。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,746評論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽柠贤。三九已至香浩,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間臼勉,已是汗流浹背邻吭。 一陣腳步聲響...
    開封第一講書人閱讀 33,859評論 1 274
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留宴霸,地道東北人囱晴。 一個月前我還...
    沈念sama閱讀 49,359評論 3 379
  • 正文 我出身青樓,卻偏偏與公主長得像瓢谢,于是被迫代替她去往敵國和親畸写。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,922評論 2 361

推薦閱讀更多精彩內(nèi)容

  • Android 自定義View的各種姿勢1 Activity的顯示之ViewRootImpl詳解 Activity...
    passiontim閱讀 172,336評論 25 707
  • 1.安裝 可以簡單地在頁面引入Vue.js作為獨(dú)立版本氓扛,Vue即被注冊為全局變量枯芬,可以在頁面使用了。 如果希望搭建...
    Awey閱讀 11,039評論 4 129
  • Vue 實(shí)例 屬性和方法 每個 Vue 實(shí)例都會代理其 data 對象里所有的屬性:var data = { a:...
    云之外閱讀 2,221評論 0 6
  • 今天大年初八淫痰,全家一起吃烤肉。吃完后大舅媽和嫂子在那刷碗整份。 今年過年人是最全的待错,別提我多開心了籽孙,而且今年小年還照了...
    a1d2343b2d92閱讀 204評論 0 0
  • 給兒子的一封信 親愛的寶貝: 突然想給你寫封信了,提起筆就有一種很奇妙的感覺朗鸠,因?yàn)槟汩L大了蚯撩,有了自己的思想和個性础倍。...
    倔強(qiáng)的小輝輝閱讀 520評論 0 0