1. 前言

大家好，我是若川。最近組織了源碼共讀活動，感興趣的可以加我微信 ruochuan12

想學(xué)源碼，極力推薦之前我寫的《學(xué)習(xí)源碼整體架構(gòu)系列》jQuery、underscore、lodash、vuex、sentry、axios、redux、koa、vue-devtools、vuex4、koa-compose、vue-next-release、vue-this、create-vue、玩具vite等10余篇源碼文章。

本文倉庫 vue-analysis，求個star^_^^[1]

最近組織了源碼共讀活動

之前寫了 Vue3 相關(guān)的兩篇文章。

• 初學(xué)者也能看懂的 Vue3 源碼中那些實用的基礎(chǔ)工具函數(shù)

這篇寫了如何學(xué)習(xí) JavaScript 基礎(chǔ)知識，推薦了很多書籍和學(xué)習(xí)資料，還有我的一些經(jīng)驗分享。

• Vue 3.2 發(fā)布了，那尤雨溪是怎么發(fā)布 Vue.js 的？

參加源碼共讀的讀者反饋，TA 其實還是用著 Vue2。能不能寫篇 Vue2 基礎(chǔ)工具函數(shù)。作為一名知識博主卑微號主，本著學(xué)我所學(xué)，為我所用，幫助他人的宗旨，于是寫上了這篇文章。算是 Vue3 工具函數(shù)的姐妹篇，本文和這篇文章會有類似的地方。

閱讀本文，你將學(xué)到：

1.?Vue2?源碼?shared?模塊中的幾十個實用工具函數(shù) 2.?如何學(xué)習(xí)源碼中優(yōu)秀代碼和思想，投入到自己的項目中 3.?如何學(xué)習(xí)?JavaScript?基礎(chǔ)知識，會推薦很多學(xué)習(xí)資料 4.?我的一些經(jīng)驗分享 5.?等等

2. 環(huán)境準備

2.1 讀開源項目 貢獻指南

打開 vue 倉庫^[2]， 開源項目一般都能在 README.md 或者 .github/contributing.md^[3] 找到貢獻指南。

而貢獻指南寫了很多關(guān)于參與項目開發(fā)的信息。比如怎么跑起來，項目目錄結(jié)構(gòu)是怎樣的。怎么投入開發(fā)，需要哪些知識儲備等。

我們可以在 項目目錄結(jié)構(gòu)^[4] 描述中，找到shared模塊。

shared: contains utilities shared across the entire codebase.

README.md 和 contributing.md 一般都是英文的。可能會難倒一部分人。其實看不懂，完全可以可以借助劃詞翻譯，整頁翻譯和谷歌翻譯等翻譯工具。再把英文加入后續(xù)學(xué)習(xí)計劃。

本文就是講 shared 模塊，對應(yīng)的文件路徑是：`vue/vue/src/shared`^[5]。

也可以用github1s訪問，速度更快。github1s vue/vue/src/shared^[6]

2.2 為了降低文章難度，直接學(xué)習(xí)打包后的源碼

源代碼的代碼`vue/vue/src/shared`^[7]，使用了Flow^[8] 類型，可能不太好理解。

為了降低文章難度，我們直接學(xué)習(xí)源碼倉庫中的打包后的 dist/vue.js 14行到379行^[9]。

當然，前面可能比較啰嗦。我可以直接講 3. 工具函數(shù)。但通過我上文的介紹，即使是初學(xué)者，都能看懂一些開源項目源碼，也許就會有一定的成就感。另外，面試問到被類似的問題或者筆試題時，你說看Vue2源碼學(xué)到的，面試官絕對對你刮目相看。

3. 工具函數(shù)

打包后的 vue.js 14行到379行^[10]，接下來就是解釋其中的這些方法。

3.1 emptyObject

/*!*?Vue.js?v2.6.14*?(c)?2014-2021?Evan?You*?Released?under?the?MIT?License.*/ /*??*/ var?emptyObject?=?Object.freeze({});

凍結(jié)對象。第一層無法修改。對象中也有判斷是否凍結(jié)的方法。

Object.isFrozen(emptyObject);?//?true

關(guān)于對象 API 推薦看之前我的文章 JavaScript 對象所有API解析^[11]

還可以看阮一峰老師的ES6 入門書籍 reflect^[12]

3.2 isUndef 是否是未定義

//?These?helpers?produce?better?VM?code?in?JS?engines?due?to?their //?explicitness?and?function?inlining. function?isUndef?(v)?{return?v?===?undefined?||?v?===?null }

3.3 isDef 是否是已經(jīng)定義

JavaScript中假值有六個。

false null undefined 0 ''?(空字符串) NaN

為了判斷準確，Vue2 源碼中封裝了isDef、 isTrue、isFalse函數(shù)來準確判斷。

見名知意。

function?isDef?(v)?{return?v?!==?undefined?&&?v?!==?null }

3.4 isTrue 是否是 true

見名知意。

function?isTrue?(v)?{return?v?===?true }

3.5 isFalse 是否是 false

見名知意。

function?isFalse?(v)?{return?v?===?false }

3.6 isPrimitive 判斷值是否是原始值

判斷是否是字符串、或者數(shù)字、或者 symbol、或者布爾值。

/***?Check?if?value?is?primitive.*/ function?isPrimitive?(value)?{return?(typeof?value?===?'string'?||typeof?value?===?'number'?||//?$flow-disable-linetypeof?value?===?'symbol'?||typeof?value?===?'boolean') }

3.7 isObject 判斷是對象

因為 typeof null 是 'object'。數(shù)組等用這個函數(shù)判斷也是 true

/***?Quick?object?check?-?this?is?primarily?used?to?tell*?Objects?from?primitive?values?when?we?know?the?value*?is?a?JSON-compliant?type.*/ function?isObject?(obj)?{return?obj?!==?null?&&?typeof?obj?===?'object' }//?例子: isObject([])?//?true //?有時不需要嚴格區(qū)分數(shù)組和對象

3.8 toRawType 轉(zhuǎn)換成原始類型

Object.prototype.toString() 方法返回一個表示該對象的字符串。

mdn^[13]

ecma 規(guī)范^[14]，說明了這些類型。

ecma 規(guī)范

ECMAScript5.1 中文版^[15]

/***?Get?the?raw?type?string?of?a?value,?e.g.,?[object?Object].*/ var?_toString?=?Object.prototype.toString;function?toRawType?(value)?{return?_toString.call(value).slice(8,?-1) }//?例子： toRawType('')?//?'String' toRawType()?//?'Undefined'

3.9 isPlainObject 是否是純對象

/***?Strict?object?type?check.?Only?returns?true*?for?plain?JavaScript?objects.*/ function?isPlainObject?(obj)?{return?_toString.call(obj)?===?'[object?Object]' }//?上文?isObject([])?也是?true //?這個就是判斷對象是純對象的方法。 //?例子： isPlainObject([])?//?false isPlainObject({})?//?true

3.10 isRegExp 是否是正則表達式

function?isRegExp?(v)?{return?_toString.call(v)?===?'[object?RegExp]' }//?例子： //?判斷是不是正則表達式 isRegExp(/ruochuan/)?//?true

3.11 isValidArrayIndex 是否是可用的數(shù)組索引值

數(shù)組可用的索引值是 0 ('0')、1 ('1') 、2 ('2') ...

/***?Check?if?val?is?a?valid?array?index.*/ function?isValidArrayIndex?(val)?{var?n?=?parseFloat(String(val));return?n?>=?0?&&?Math.floor(n)?===?n?&&?isFinite(val) }

該全局 isFinite() 函數(shù)用來判斷被傳入的參數(shù)值是否為一個有限數(shù)值（finite number）。在必要情況下，參數(shù)會首先轉(zhuǎn)為一個數(shù)值。

isFinite mdn^[16]

isFinite(Infinity);??//?false isFinite(NaN);???????//?false isFinite(-Infinity);?//?falseisFinite(0);?????????//?true isFinite(2e64);??????//?true,?在更強壯的Number.isFinite(null)中將會得到falseisFinite('0');???????//?true,?在更強壯的Number.isFinite('0')中將會得到false

3.12 isPromise 判斷是否是 promise

function?isPromise?(val)?{return?(isDef(val)?&&typeof?val.then?===?'function'?&&typeof?val.catch?===?'function') }//?例子： isPromise(new?Promise())?//?true

這里用 isDef 判斷其實相對 isObject 來判斷 來說有點不嚴謹。但是夠用。

3.13 toString 轉(zhuǎn)字符串

轉(zhuǎn)換成字符串。是數(shù)組或者對象并且對象的 toString 方法是 Object.prototype.toString，用 JSON.stringify 轉(zhuǎn)換。

/***?Convert?a?value?to?a?string?that?is?actually?rendered.*/ function?toString?(val)?{return?val?==?null??'':?Array.isArray(val)?||?(isPlainObject(val)?&&?val.toString?===?_toString)??JSON.stringify(val,?null,?2):?String(val) }

3.14 toNumber 轉(zhuǎn)數(shù)字

轉(zhuǎn)換成數(shù)字。如果轉(zhuǎn)換失敗依舊返回原始字符串。

/***?Convert?an?input?value?to?a?number?for?persistence.*?If?the?conversion?fails,?return?original?string.*/ function?toNumber?(val)?{var?n?=?parseFloat(val);return?isNaN(n)???val?:?n }toNumber('a')?//?'a' toNumber('1')?//?1 toNumber('1a')?//?1 toNumber('a1')?//?'a1'

3.15 makeMap 生成一個 map （對象）

傳入一個以逗號分隔的字符串，生成一個 map(鍵值對)，并且返回一個函數(shù)檢測 key 值在不在這個 map 中。第二個參數(shù)是小寫選項。

/***?Make?a?map?and?return?a?function?for?checking?if?a?key*?is?in?that?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];?} }//?Object.create(null)?沒有原型鏈的空對象

3.16 isBuiltInTag 是否是內(nèi)置的 tag

/***?Check?if?a?tag?is?a?built-in?tag.*/ var?isBuiltInTag?=?makeMap('slot,component',?true);//?返回的函數(shù)，第二個參數(shù)不區(qū)分大小寫 isBuiltInTag('slot')?//?true isBuiltInTag('component')?//?true isBuiltInTag('Slot')?//?true isBuiltInTag('Component')?//?true

3.17 isReservedAttribute 是否是保留的屬性

/***?Check?if?an?attribute?is?a?reserved?attribute.*/ var?isReservedAttribute?=?makeMap('key,ref,slot,slot-scope,is');isReservedAttribute('key')?//?true isReservedAttribute('ref')?//?true isReservedAttribute('slot')?//?true isReservedAttribute('slot-scope')?//?true isReservedAttribute('is')?//?true isReservedAttribute('IS')?//?undefined

3.18 remove 移除數(shù)組中的中一項

/***?Remove?an?item?from?an?array.*/ function?remove?(arr,?item)?{if?(arr.length)?{var?index?=?arr.indexOf(item);if?(index?>?-1)?{return?arr.splice(index,?1)}} }

splice 其實是一個很耗性能的方法。刪除數(shù)組中的一項，其他元素都要移動位置。

引申：`axios InterceptorManager` 攔截器源碼^[17] 中，攔截器用數(shù)組存儲的。但實際移除攔截器時，只是把攔截器置為 null 。而不是用splice移除。最后執(zhí)行時為 null 的不執(zhí)行，同樣效果。axios 攔截器這個場景下，不得不說為性能做到了很好的考慮。因為攔截器是用戶自定義的，理論上可以有無數(shù)個，所以做性能考慮是必要的。

看如下 axios 攔截器代碼示例：

//?代碼有刪減 //?聲明 this.handlers?=?[];//?移除 if?(this.handlers[id])?{this.handlers[id]?=?null; }//?執(zhí)行 if?(h?!==?null)?{fn(h); }

3.19 hasOwn 檢測是否是自己的屬性

/***?Check?whether?an?object?has?the?property.*/ var?hasOwnProperty?=?Object.prototype.hasOwnProperty; function?hasOwn?(obj,?key)?{return?hasOwnProperty.call(obj,?key) }//?例子：//?特別提醒：__proto__?是瀏覽器實現(xiàn)的原型寫法，后面還會用到 //?現(xiàn)在已經(jīng)有提供好幾個原型相關(guān)的API //?Object.getPrototypeOf //?Object.setPrototypeOf //?Object.isPrototypeOf// .call 則是函數(shù)里 this 顯示指定以為第一個參數(shù)，并執(zhí)行函數(shù)。hasOwn({__proto__:?{?a:?1?}},?'a')?//?false hasOwn({?a:?undefined?},?'a')?//?true hasOwn({},?'a')?//?false hasOwn({},?'hasOwnProperty')?//?false hasOwn({},?'toString')?//?false //?是自己的本身擁有的屬性，不是通過原型鏈向上查找的。

3.20 cached 緩存

利用閉包特性，緩存數(shù)據(jù)

/***?Create?a?cached?version?of?a?pure?function.*/ function?cached?(fn)?{var?cache?=?Object.create(null);return?(function?cachedFn?(str)?{var?hit?=?cache[str];return?hit?||?(cache[str]?=?fn(str))}) }

系統(tǒng)學(xué)習(xí)正則推薦老姚：《JavaScript 正則表達式迷你書》問世了！^[18]，看過的都說好。所以本文不會很詳細的描述正則相關(guān)知識點。

3.21 camelize 連字符轉(zhuǎn)小駝峰

連字符 - 轉(zhuǎn)駝峰 ?on-click => onClick

/***?Camelize?a?hyphen-delimited?string.*/ var?camelizeRE?=?/-(\w)/g; var?camelize?=?cached(function?(str)?{return?str.replace(camelizeRE,?function?(_,?c)?{?return?c???c.toUpperCase()?:?'';?}) });

3.22 capitalize 首字母轉(zhuǎn)大寫

首字母轉(zhuǎn)大寫

/***?Capitalize?a?string.*/ var?capitalize?=?cached(function?(str)?{return?str.charAt(0).toUpperCase()?+?str.slice(1) });

3.23 hyphenate 小駝峰轉(zhuǎn)連字符

onClick => on-click

/***?Hyphenate?a?camelCase?string.*/ var?hyphenateRE?=?/\B([A-Z])/g; var?hyphenate?=?cached(function?(str)?{return?str.replace(hyphenateRE,?'-$1').toLowerCase() });

3.24 polyfillBind bind 的墊片

/***?Simple?bind?polyfill?for?environments?that?do?not?support?it,*?e.g.,?PhantomJS?1.x.?Technically,?we?don't?need?this?anymore*?since?native?bind?is?now?performant?enough?in?most?browsers.*?But?removing?it?would?mean?breaking?code?that?was?able?to?run?in*?PhantomJS?1.x,?so?this?must?be?kept?for?backward?compatibility.*//*?istanbul?ignore?next?*/ function?polyfillBind?(fn,?ctx)?{function?boundFn?(a)?{var?l?=?arguments.length;return?l??l?>?1??fn.apply(ctx,?arguments):?fn.call(ctx,?a):?fn.call(ctx)}boundFn._length?=?fn.length;return?boundFn }function?nativeBind?(fn,?ctx)?{return?fn.bind(ctx) }var?bind?=?Function.prototype.bind??nativeBind:?polyfillBind;

簡單來說就是兼容了老版本瀏覽器不支持原生的 bind 函數(shù)。同時兼容寫法，對參數(shù)的多少做出了判斷，使用call和apply實現(xiàn)，據(jù)說參數(shù)多適合用 apply，少用 call 性能更好。

如果對于call、apply、bind的用法和實現(xiàn)不熟悉，可以查看我在面試官問系列面試官問：能否模擬實現(xiàn)JS的call和apply方法面試官問：能否模擬實現(xiàn)JS的bind方法

3.25 toArray 把類數(shù)組轉(zhuǎn)成真正的數(shù)組

把類數(shù)組轉(zhuǎn)換成數(shù)組，支持從哪個位置開始，默認從 0 開始。

/***?Convert?an?Array-like?object?to?a?real?Array.*/ function?toArray?(list,?start)?{start?=?start?||?0;var?i?=?list.length?-?start;var?ret?=?new?Array(i);while?(i--)?{ret[i]?=?list[i?+?start];}return?ret }//?例子： function?fn(){var?arr1?=?toArray(arguments);console.log(arr1);?//?[1,?2,?3,?4,?5]var?arr2?=?toArray(arguments,?2);console.log(arr2);?//?[3,?4,?5] } fn(1,2,3,4,5);

3.26 extend 合并

/***?Mix?properties?into?target?object.*/ function?extend?(to,?_from)?{for?(var?key?in?_from)?{to[key]?=?_from[key];}return?to }//?例子： const?data?=?{?name:?'若川'?}; const?data2?=?extend(data,?{?mp:?'若川視野',?name:?'是若川啊'?}); console.log(data);?//?{?name:?"是若川啊",?mp:?"若川視野"?} console.log(data2);?//?{?name:?"是若川啊",?mp:?"若川視野"?} console.log(data?===?data2);?//?true

3.27 toObject 轉(zhuǎn)對象

/***?Merge?an?Array?of?Objects?into?a?single?Object.*/ function?toObject?(arr)?{var?res?=?{};for?(var?i?=?0;?i?<?arr.length;?i++)?{if?(arr[i])?{extend(res,?arr[i]);}}return?res }//?數(shù)組轉(zhuǎn)對象 toObject(['若川',?'若川視野']) //?{0:?'若',?1:?'川',?2:?'視',?3:?'野'}

3.28 noop 空函數(shù)

/*?eslint-disable?no-unused-vars?*/ /***?Perform?no?operation.*?Stubbing?args?to?make?Flow?happy?without?leaving?useless?transpiled?code*?with?...rest?(https://flow.org/blog/2017/05/07/Strict-Function-Call-Arity/).*/ function?noop?(a,?b,?c)?{}//?初始化賦值

3.29 no 一直返回 false

/***?Always?return?false.*/ var?no?=?function?(a,?b,?c)?{?return?false;?}; /*?eslint-enable?no-unused-vars?*/

3.30 identity 返回參數(shù)本身

/***?Return?the?same?value.*/ var?identity?=?function?(_)?{?return?_;?};

3.31 genStaticKeys 生成靜態(tài)屬性

/***?Generate?a?string?containing?static?keys?from?compiler?modules.*/ function?genStaticKeys?(modules)?{return?modules.reduce(function?(keys,?m)?{return?keys.concat(m.staticKeys?||?[])},?[]).join(',') }

3.32 looseEqual 寬松相等

由于數(shù)組、對象等是引用類型，所以兩個內(nèi)容看起來相等，嚴格相等都是不相等。

var?a?=?{}; var?b?=?{}; a?===?b;?//?false a?==?b;?//?false

所以該函數(shù)是對數(shù)組、日期、對象進行遞歸比對。如果內(nèi)容完全相等則寬松相等。

/***?Check?if?two?values?are?loosely?equal?-?that?is,*?if?they?are?plain?objects,?do?they?have?the?same?shape?*/ function?looseEqual?(a,?b)?{if?(a?===?b)?{?return?true?}var?isObjectA?=?isObject(a);var?isObjectB?=?isObject(b);if?(isObjectA?&&?isObjectB)?{try?{var?isArrayA?=?Array.isArray(a);var?isArrayB?=?Array.isArray(b);if?(isArrayA?&&?isArrayB)?{return?a.length?===?b.length?&&?a.every(function?(e,?i)?{return?looseEqual(e,?b[i])})}?else?if?(a?instanceof?Date?&&?b?instanceof?Date)?{return?a.getTime()?===?b.getTime()}?else?if?(!isArrayA?&&?!isArrayB)?{var?keysA?=?Object.keys(a);var?keysB?=?Object.keys(b);return?keysA.length?===?keysB.length?&&?keysA.every(function?(key)?{return?looseEqual(a[key],?b[key])})}?else?{/*?istanbul?ignore?next?*/return?false}}?catch?(e)?{/*?istanbul?ignore?next?*/return?false}}?else?if?(!isObjectA?&&?!isObjectB)?{return?String(a)?===?String(b)}?else?{return?false} }

3.33 looseIndexOf 寬松的 indexOf

該函數(shù)實現(xiàn)的是寬松相等。原生的 indexOf 是嚴格相等。

/***?Return?the?first?index?at?which?a?loosely?equal?value?can?be*?found?in?the?array?(if?value?is?a?plain?object,?the?array?must*?contain?an?object?of?the?same?shape),?or?-1?if?it?is?not?present.*/ function?looseIndexOf?(arr,?val)?{for?(var?i?=?0;?i?<?arr.length;?i++)?{if?(looseEqual(arr[i],?val))?{?return?i?}}return?-1 }

3.34 once 確保函數(shù)只執(zhí)行一次

利用閉包特性，存儲狀態(tài)

/***?Ensure?a?function?is?called?only?once.*/ function?once?(fn)?{var?called?=?false;return?function?()?{if?(!called)?{called?=?true;fn.apply(this,?arguments);}} }const?fn1?=?once(function(){console.log('哎嘿，無論你怎么調(diào)用，我只執(zhí)行一次'); });fn1();?//?'哎嘿，無論你怎么調(diào)用，我只執(zhí)行一次' fn1();?//?不輸出 fn1();?//?不輸出 fn1();?//?不輸出

3.35 生命周期等

var?SSR_ATTR?=?'data-server-rendered';var?ASSET_TYPES?=?['component','directive','filter' ];[Vue?生命周期](https://cn.vuejs.org/v2/api/#%E9%80%89%E9%A1%B9-%E7%94%9F%E5%91%BD%E5%91%A8%E6%9C%9F%E9%92%A9%E5%AD%90?"Vue?生命周期")var?LIFECYCLE_HOOKS?=?['beforeCreate','created','beforeMount','mounted','beforeUpdate','updated','beforeDestroy','destroyed','activated','deactivated','errorCaptured','serverPrefetch' ];

4. 最后推薦一些文章和書籍

這部分和Vue3工具函數(shù)文章一樣，值得推薦，所以復(fù)制到這里。

先推薦我認為不錯的JavaScript API的幾篇文章和幾本值得讀的書。

JavaScript字符串所有API全解密^[19]

【深度長文】JavaScript數(shù)組所有API全解密^[20]

正則表達式前端使用手冊^[21]

老姚：《JavaScript 正則表達式迷你書》問世了！^[22]

老姚淺談：怎么學(xué)JavaScript？

JavaScript 對象所有API解析

MDN JavaScript^[23]

《JavaScript高級程序設(shè)計》第4版^[24]

《JavaScript 權(quán)威指南》第7版^[25]

《JavaScript面向?qū)ο缶幊?》^[26] 面向?qū)ο笾v的很詳細。

阮一峰老師：《ES6 入門教程》^[27]

《現(xiàn)代 JavaScript 教程》^[28]

《你不知道的JavaScript》上中卷^[29]

《JavaScript 設(shè)計模式與開發(fā)實踐》^[30]

我也是從小白看不懂書經(jīng)歷過來的。到現(xiàn)在寫文章分享。

我看書的方法：多本書同時看，看相同類似的章節(jié)，比如函數(shù)。看完這本可能沒懂，看下一本，幾本書看下來基本就懂了，一遍沒看懂，再看幾遍，可以避免遺忘，鞏固相關(guān)章節(jié)。當然，剛開始看書很難受，看不進。這些書大部分在微信讀書都有，如果習(xí)慣看紙質(zhì)書，那可以買來看。

這時可以看些視頻和動手練習(xí)一些簡單的項目。

比如：可以自己注冊一個github賬號，分章節(jié)小節(jié)，抄寫書中的代碼，提交到github，練習(xí)了才會更有感覺。

再比如 freeCodeCamp 中文在線學(xué)習(xí)網(wǎng)站^[31] 網(wǎng)站。看書是系統(tǒng)學(xué)習(xí)非常好的方法。后來我就是看源碼較多，寫文章分享出來給大家。

5. 總結(jié)

本文通過查看 Vue2 源碼中 shared 模塊打包后的 dist/vue.js 14行到379行^[32]。源碼也不是那么難，至少很多能看懂，比如工具函數(shù)。難可能是難在：不知道應(yīng)用場景。

Vue2 工具函數(shù)命名很規(guī)范，比如：is 判斷，to 轉(zhuǎn)換，has 是否有，讓開發(fā)者一眼就能看出函數(shù)語意。

這些函數(shù)也非常單一，基本一個函數(shù)只做一件事。

建議讀者朋友把不熟悉的函數(shù)，動手寫寫，有助于鞏固基礎(chǔ)知識，查漏補缺。

最后歡迎加我微信 ruochuan12源碼共讀 活動，大家一起學(xué)習(xí)源碼，共同進步。

參考資料

[1]

本文倉庫 vue-analysis，求個star^_^: https://github.com/lxchuan12/vue-analysis.git

[2]

vue 倉庫: https://github.com/vuejs/vue

[3]

更多參考資料可以點擊閱讀原文查看

---

最近組建了一個江西人的前端交流群，如果你是江西人可以加我微信?ruochuan12?私信 江西?拉你進群。

推薦閱讀

1個月，200+人，一起讀了4周源碼
我歷時3年才寫了10余篇源碼文章，但收獲了100w+閱讀

老姚淺談：怎么學(xué)JavaScript？

我在阿里招前端，該怎么幫你（可進面試群）

·················?若川簡介?·················

你好，我是若川，畢業(yè)于江西高校。現(xiàn)在是一名前端開發(fā)“工程師”。寫有《學(xué)習(xí)源碼整體架構(gòu)系列
從2014年起，每年都會寫一篇年度總結(jié)，已經(jīng)寫了7篇，點擊查看年度總結(jié)。
同時，最近組織了源碼共讀活動

識別上方二維碼加我微信、拉你進源碼共讀群

今日話題

略。歡迎分享、收藏、點贊、在看我的公眾號文章~

總結(jié)

以上是生活随笔為你收集整理的初学者也能看懂的 Vue2 源码中那些实用的基础工具函数的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。