摘要：扎實(shí)基礎(chǔ)幸好自己之前花了大力氣去給自己打基礎(chǔ)，讓自己現(xiàn)在的基礎(chǔ)還算不錯(cuò)。

寫(xiě)文章不容易，點(diǎn)個(gè)贊唄兄弟
專注 Vue 源碼分享，文章分為白話版和 源碼版，白話版助于理解工作原理，源碼版助于了解內(nèi)部詳情，讓我們一起學(xué)習(xí)吧
研究基于 Vue版本 【2.5.17】

如果你覺(jué)得排版難看，請(qǐng)點(diǎn)擊 下面鏈接 或者 拉到 下面關(guān)注公眾號(hào)也可以吧

【Vue原理】Vue源碼閱讀總結(jié)大會(huì) - 序

閱讀源碼是需要很多的勇氣的，特別是對(duì)這種 Vue 源碼的框架，十分抽象，使用了好多設(shè)計(jì)模式，封裝得十分精密。很難短時(shí)間內(nèi)能看得明白。

而我顯然也是做好了心里準(zhǔn)備 和 知識(shí)準(zhǔn)備啦，我老早就想攻破 Vue 源碼 這座城堡

但是顯然我當(dāng)時(shí)還沒(méi)有做好準(zhǔn)備，我認(rèn)為自己不可以貿(mào)然去看，不然自己煩，自己累，還難以收獲

本篇文章算是一個(gè)簡(jiǎn)單地吹水，就是跟大家談?wù)勎业母邢?，沒(méi)有什么知識(shí)含量，其實(shí)也有的。

1、掌握 Vue 所有API
我把 Vue 的所有 API 都詳細(xì)研究使用過(guò)了一遍，而且盡量在項(xiàng)目中都有使用，讓自己有深一點(diǎn)的體會(huì)
而且我對(duì)著官方文檔，一個(gè)個(gè)做了詳細(xì)的筆記，而且聯(lián)想過(guò)了使用場(chǎng)景。

2、JavaScript 扎實(shí)基礎(chǔ)
幸好自己之前花了大力氣去給自己打基礎(chǔ)，讓自己現(xiàn)在的 JavaScript 基礎(chǔ)還算不錯(cuò)。
逼著自己把很多本 JavaScript 書(shū)都看完了，并且做了詳細(xì)筆記。像是【 JavaScript易維護(hù)】【JavaScript性能 】，【JavaScript 高級(jí)程序設(shè)計(jì)】【巴菲特給股東的信】看了兩遍，說(shuō)不上精通，也算是還可以？

3、看完 JavaScript 設(shè)計(jì)模式
光是 JavaScript 設(shè)計(jì)模式 這本書(shū) 我就看了一年半，不能說(shuō)自己把所有設(shè)計(jì)模式都掌握了，掌握了大部分吧，設(shè)計(jì)模式港真真的很有趣，不然我也不會(huì)決心學(xué)
在這里推薦 張容銘的 【JavaScript設(shè)計(jì)模式】，書(shū)講得非常透徹和詳細(xì)，我是從完全不懂開(kāi)始看的
也經(jīng)常使用一部分，我一直以設(shè)計(jì)模式為我的項(xiàng)目基構(gòu)。就是 能用設(shè)計(jì)模式的地方，我都盡量使用設(shè)計(jì)模式。
設(shè)計(jì)模式看起來(lái)就像是 劍客 的劍譜，有招有式，連人家武俠劇發(fā)功的時(shí)候都知道 喊出 招式的名字... 降龍十八掌！?。?！
野路子難登大雅之堂，主要是不好看啊，代碼為了好維護(hù)，易擴(kuò)展

4、學(xué)會(huì)調(diào)試
我很大膽地說(shuō)，如果你不會(huì)調(diào)試，你看 Vue 源碼，或者你會(huì)想死，你會(huì)出現(xiàn)這個(gè)場(chǎng)景...
MMP，這個(gè)方法是怎么跳到 那個(gè)方法的，那個(gè)方法和 這個(gè)方法又是怎么聯(lián)系起來(lái)的？
也許你可以慢慢 使用 函數(shù)名字 去尋找，但是無(wú)疑你會(huì)多消耗幾倍時(shí)間，而且你會(huì)更煩
使用調(diào)試真的方便，以前我也真的不喜歡調(diào)試，覺(jué)得好像很難？？？
更喜歡使用 console.log 去打印信息.....
是啊，我自己寫(xiě)項(xiàng)目的時(shí)候，我還是會(huì)使用 console.log 去調(diào)試.......
那是因?yàn)槲易约捍a，我知道怎么跑，你 看別人的代碼，還是超級(jí)抽象的框架，使用 console.log 的方式.....
放心，相信我，你會(huì)掉很多頭發(fā).........
這里，我使用的是 VSCode 去調(diào)試，真的簡(jiǎn)單又方便，我當(dāng)時(shí)也真的很難去讓自己又要學(xué)一個(gè)東西
但是我咬咬牙，我還是學(xué)了，感謝自己......
我可以保證，你從不懂到掌握，只要不到十分鐘，簡(jiǎn)直就是 現(xiàn)實(shí)版的 十分鐘精通到入門(mén)
好吧，下面開(kāi)始說(shuō)，Vue 的簡(jiǎn)單總結(jié)。

1、封裝了很多常用的函數(shù)！

為了 復(fù)用 且 易維護(hù)
常用的類型判斷、 類型轉(zhuǎn)換 、數(shù)據(jù)格式轉(zhuǎn)換（數(shù)組轉(zhuǎn)對(duì)象）.....
舉些例子

function isObject(obj) {    return obj !== null && typeof obj === "object"}
function isUndef(v) {    return v === undefined || v === null}
function isDef(v) {    return v !== undefined && v !== null}
function toString(val) {    
    return val == null ?    "" :    
    typeof val === "object" ?    
    JSON.stringify(val, null, 2) :    String(val)
}
function toObject(arr) {    
    var res = {};    
    for (var i = 0; i < arr.length; i++) {        
        if (arr[i]) {
            extend(res, arr[i]);
        }
    }    return res
}
....

你說(shuō)說(shuō)不定過(guò)了幾年，判斷是否是一個(gè)對(duì)象，不再是 什么 typeof obj=="object"
如果沒(méi)有封裝，那豈不是所有代碼涉及到的都要改一遍，且不說(shuō)如果有很多個(gè)都變了.....那你就頭大了

節(jié)點(diǎn)操作兼容函數(shù)
addClass ,removeClass，createElement，appendChild，removeChild

function addClass(el, cls) {    
    if (!cls || !(cls = cls.trim())) return
    if (el.classList) {        
        if (cls.indexOf(" ") > -1) {
            cls.split(/s+/).forEach(function(c) { return el.classList.add(c); });
        } else {
            el.classList.add(cls);
        }

    } else {        
       var cur = " " + (el.getAttribute("class") || "") + " ";        
       if (cur.indexOf(" " + cls + " ") < 0) {
            el.setAttribute("class", (cur + cls).trim());
       }
    }
}
....

這些函數(shù)都很有用，所以我都記下來(lái)了，畢竟是 框架封裝的，肯定是最完善的

function isObject(obj) {    return obj !== null && typeof obj === "object"}
function isUndef(v) {    return v === undefined || v === null}
function isDef(v) {    return v !== undefined && v !== null}
function toString(val) {    
    return val == null ?    "" :    
    typeof val === "object" ?    
    JSON.stringify(val, null, 2) :    String(val)
}
function toObject(arr) {    
    var res = {};    
    for (var i = 0; i < arr.length; i++) {        
        if (arr[i]) {
            extend(res, arr[i]);
        }
    }    return res
}

2、真的用了很多設(shè)計(jì)模式

就我看到的設(shè)計(jì)模式就有
觀察者模式、狀態(tài)模式、節(jié)流模式、 參與者模式、備忘錄模式、單例模式 裝飾者模式、組合繼承模式、鏈模式.........
我懷疑 Vue 把所有的設(shè)計(jì)模式都用完了.... 真的..... 如果你不懂設(shè)計(jì)模式
你真不會(huì)領(lǐng)悟到他這么寫(xiě)的精髓
我就選 Vue 常用的一個(gè)設(shè)計(jì)模式來(lái)講

【參與者模式】

Vue 封裝的很多函數(shù)都是用了 參與者模式，也可以叫做柯里化
先來(lái)簡(jiǎn)單解釋下 參與者模式

1、保存第一次調(diào)用 傳入?yún)?shù)
2、返回定制函數(shù)，函數(shù)內(nèi)使用 參數(shù)
簡(jiǎn)單實(shí)現(xiàn)像這樣

function add(a){    
    return function(b){ return a+b }
}
// 為了定制函數(shù)，把第一次調(diào)用時(shí)的參數(shù)閉包保存
add5 = add(5)var result  = add5(9)

看一下 Vue其中一個(gè) 使用柯里化 的封裝函數(shù)
makeMap

創(chuàng)建 對(duì)象 map，返回函數(shù)，用于后面查找 某個(gè)東西是否存在 map 中

function makeMap( str,  expectsLowerCase ) {    
    var map = Object.create(null);   
    var list = str.split(",");    
    for (var i = 0; i < list.length; i++) {
        map[list[i]] = true;
    }    
    return expectsLowerCase ?        
        function(val) { return map[val.toLowerCase()]; } :        
        function(val) { return map[val]; }
}

// 應(yīng)用
var isUnaryTag = makeMap(   
 "area,base,br,col,embed,frame,hr,img,input,isindex,keygen," +  
 "link,meta,param,source,track,wbr");

// 查找 area 標(biāo)簽是否存在 上面保存過(guò)的 字符串中
isUnaryTag("area")

3、使用很多閉包！

據(jù)我看過(guò)的地方
1、解析組件模板 使用了閉包作為緩存，為了重復(fù)解析
2、cached 函數(shù)，一個(gè)專門(mén)使用閉包 為緩存的函數(shù)
3、上面所講到 的 柯里化所有涉及的函數(shù)，makeMap,parthPath,
4、createPatchFunction 當(dāng)屬篇幅最大的使用閉包的函數(shù)了，把一堆函數(shù)作為閉包，然后返回 一個(gè)函數(shù)。他最大的作用是 比較更新DOM 節(jié)點(diǎn)

4、使用很多標(biāo)志位
Vue 常用標(biāo)志位來(lái)

1、表明是否已經(jīng)做了某件事

_isMounted：// dom 是否已經(jīng)掛載
_isDestroyed // 組件是否已經(jīng)摧毀
pending //表明更新回調(diào)的 setTimeout 已經(jīng)執(zhí)行
waiting //是否已經(jīng)初始化更新隊(duì)列，在等待新的成員進(jìn)入對(duì)壘
flushing //更新隊(duì)列是否已經(jīng)開(kāi)始逐個(gè)更新成員
....

2、指明當(dāng)前東西的身份

isStatic// 是否是靜態(tài)節(jié)點(diǎn)
isComment// 是否是注釋節(jié)點(diǎn)
isClone：// 是否是克隆節(jié)點(diǎn)
isOnce// 是否有v-once 指令（如果有當(dāng)前指令，會(huì)跳過(guò)編譯）
_isComponent// 是否是組件

多用標(biāo)志位，控制流程，替代多余的判斷（直接判斷標(biāo)志位來(lái)確認(rèn)身份，不用做太多的判斷），減少開(kāi)銷
上面那些變量，大家沒(méi)看源碼，可能有些懵逼，沒(méi)關(guān)系，就當(dāng)先知道有這個(gè)東西就好了

我給自己定的任務(wù)是 分為兩個(gè)部分

Vue 的主體內(nèi)容

1、依賴收集
2、依賴更新
3、Virtual DOM ，dom 節(jié)點(diǎn) 生成虛擬Vnode 節(jié)點(diǎn)
4、Compile， 模板編譯
5、Diff、Patch， 節(jié)點(diǎn)比較更新
6、NextTick ，延遲執(zhí)行回調(diào)
7、Render， 渲染機(jī)制
8、LifeCircle ，生命周期
9、Model ，雙向綁定
10、Event ，事件機(jī)制

我就大約以這些為我的學(xué)習(xí)目標(biāo)進(jìn)行 源碼閱讀的，每一塊都是一個(gè)非常大的內(nèi)容，每一塊內(nèi)容都不是幾天能看完的，有時(shí)候還需要一點(diǎn)靈感。當(dāng)然還有很多內(nèi)容，但是我的目標(biāo)也并不是全部，一字不漏讀完，我要的是他的精髓即可，或許等我掌握了這些，再去開(kāi)發(fā)其他的內(nèi)容，這樣或許更簡(jiǎn)單

反正我始終提醒自己不要焦躁，因?yàn)檫@個(gè)東西真的是急不來(lái)，長(zhǎng)期以往，不要妄想一步登天，一開(kāi)始總會(huì)很難，但是久了也一樣很難，哈哈哈哈哈

如果你有興趣也讀源碼，我們可以一起討論學(xué)習(xí)....