上一節(jié)我們結(jié)合代碼和文檔佳遣,詳細介紹了Global Config姥份,下面我們詳細來看看Global API祠丝。
Global API
OK,結(jié)合官方文檔和代碼細節(jié)嘶伟,我們來看看這些 Global API 的具體用法:
-
Vue.set(object, key, value)
文檔說明:
- 參數(shù):
{Object} object
{string} key
{any} value
- 返回值:設(shè)置的值(從代碼細節(jié)中看怎憋,這個描述不是很嚴謹)
- 用法:
設(shè)置對象的屬性。如果對象是響應(yīng)式的九昧,確保屬性被創(chuàng)建后也是響應(yīng)式的绊袋,同時觸發(fā)視圖更新。這個方法主要用于避開 Vue 不能檢測屬性被添加的限制铸鹰。
注意對象不能是 Vue 實例癌别,或者 Vue 實例的根數(shù)據(jù)對象。
源碼定義在 'src/core/observer/index.js' 文件中蹋笼,基本邏輯為:
- 如果object是數(shù)組展姐,將value插入到key對應(yīng)的位置,直接返回value
- 如果object對象自身含有key屬性剖毯,將該屬性值更新為vlaue圾笨。然后返回
- 如果object是Vue實例對象,或者是Vue實例對象的根數(shù)據(jù)對象逊谋,給出警告信息(開發(fā)模式)然后直接返回擂达,不做處理
- 如果object沒有被追蹤(observed),則為object增加或修改key屬性胶滋,之后返回
- 如果不是以上情況谍婉,則為object增加響應(yīng)式屬性,并觸發(fā)視圖更新镀钓。返回value。(這部分涉及到Vue的響應(yīng)式設(shè)計原理镀迂,后續(xù)會深入研究)
- 參數(shù):
-
Vue.delete(object, key)
文檔說明:
- 參數(shù):
{Object} object
{string} key
- 用法:
刪除對象的屬性丁溅。如果對象是響應(yīng)式的,確保刪除能觸發(fā)更新視圖探遵。這個方法主要用于避開 Vue 不能檢測到屬性被刪除的限制窟赏,但是你應(yīng)該很少會使用它。
注意對象不能是 Vue 實例箱季,或者 Vue 實例的根數(shù)據(jù)對象
源碼定義在 'src/core/observer/index.js' 文件中涯穷,基本邏輯為:
- 如果object是Vue實例對象,或者是Vue實例對象的根數(shù)據(jù)對象藏雏,給出警告信息(開發(fā)模式)然后直接返回拷况,不做處理
- 如果object對象自身沒有key屬性,直接返回不做處理
- 如果不是以上情況,直接刪除object的key屬性赚瘦。如果object沒有被追蹤(observed)粟誓,則直接返回,否則觸發(fā)視圖更新起意。
- 參數(shù):
-
Vue.nextTick([callback, context])
文檔說明:
- 參數(shù):
{Function} [callback]
{Object} [context]
- 用法:
在下次 DOM 更新循環(huán)結(jié)束之后執(zhí)行延遲回調(diào)鹰服。在修改數(shù)據(jù)之后立即使用這個方法,獲取更新后的 DOM揽咕。
這里涉及到Vue的異步更新隊列悲酷,后續(xù)會深入研究。
源碼定義在 'src/core/util/env.js' 文件中亲善,使用閉包和立即執(zhí)行函數(shù)返回一個 queueNextTick 函數(shù)设易,從而實現(xiàn)了一個異步隊列機制。
代碼看似復(fù)雜逗爹,其實本質(zhì)上就是以異步隊列的方式亡嫌,使用給定上下文context來執(zhí)行callback函數(shù)。 - 參數(shù):
-
Vue.use(plugin)
文檔說明:
- 參數(shù):
{Object | Function} plugin
- 用法:
安裝 Vue.js 插件掘而。如果插件是一個對象挟冠,必須提供 install 方法。如果插件是一個函數(shù)袍睡,它會被作為 install 方法知染。install 方法將被作為 Vue 的參數(shù)調(diào)用。
當 install 方法被同一個插件多次調(diào)用斑胜,插件將只會被安裝一次控淡。
源碼定義在 'src/core/global-api/use.js' 文件中,基本邏輯為:
- 如果plugin已經(jīng)安裝(通過plugin的installed屬性)止潘,則直接返回掺炭,不做處理
- 如果plugin.install是一個函數(shù),則執(zhí)行plugin.install(傳入的plugin為對象)凭戴。否則直接執(zhí)行plugin(傳入的plugin為函數(shù))涧狮。
- 將plugin的installed屬性設(shè)置為true
- 參數(shù):
-
Vue.mixin(mixin)
文檔說明:
- 參數(shù):
{Object} mixin
- 用法:
全局注冊一個混合,影響注冊之后所有創(chuàng)建的每個 Vue 實例么夫。插件作者可以使用混合者冤,向組件注入自定義的行為。
不推薦在應(yīng)用代碼中使用档痪。
源碼定義在 'src/core/global-api/mixin.js' 文件中涉枫,代碼非常簡短,就是要向Vue.options合并其他選項腐螟。
具體是通過調(diào)用 mergeOptions 函數(shù)實現(xiàn)的愿汰,有關(guān)的信息曾經(jīng)在 Global Config 的 Vue.config.optionMergeStrategies 部分介紹過困后。 - 參數(shù):
-
Vue.extend(options)
文檔說明:
- 參數(shù):
{Object} options
- 用法:
使用基礎(chǔ) Vue 構(gòu)造器,創(chuàng)建一個“子類”尼桶。參數(shù)是一個包含組件選項的對象操灿。
data 選項是特例,需要注意 - 在 Vue.extend() 中它必須是函數(shù)泵督。(關(guān)于為何data必須是函數(shù)趾盐,可以在Vue預(yù)定義的屬性合并策路中找到。 'src/core/util/options.js' 文件中 'strats.data' 的定義小腊。其它有關(guān)屬性合并策略的信息救鲤,請參考 Global Config 的 Vue.config.optionMergeStrategies 部分)
源碼定義在 'src/core/global-api/extend.js' 文件中,基本邏輯為:
- 處理cid相關(guān)
- 判斷options中的name秩冈,只可包含數(shù)字本缠,字母和連接符-
- 定義Super指向Vue構(gòu)造器,使用構(gòu)造器模式和原型繼承模式構(gòu)建一個Sub繼承Super入问。
- 調(diào)用 mergeOptions 函數(shù)合并屬性丹锹,并賦值給Sub。
- 將Super的全局函數(shù)(use芬失,mixin楣黍,extend,component棱烂,directive租漂,filter等)賦值給Sub。
- 在Sub中記錄Super信息:
Sub['super']= Super; Sub['superOptions'] = Super.options;
颊糜。
- 參數(shù):
-
Vue.component(id, [definition])
文檔說明:
- 參數(shù):
{string} id
{Function | Object} [definition]
- 用法:
注冊或獲取全局組件哩治。注冊還會自動使用給定的id設(shè)置組件的名稱。
源碼定義在 'src/core/global-api/assets.js' 文件中衬鱼,基本邏輯為:
- 如果沒有給定definition业筏,執(zhí)行讀取操作。返回Vue.components[id]鸟赫。
- 否則蒜胖,判斷給定id的值是否為保留字,是保留字的話惯疙,給出警告信息(開發(fā)模式下)。
- 如果在definition中沒有給定name屬性妖啥,則使用id作為name屬性的值
- 默認調(diào)用Vue.extend霉颠,將definition包裝為Vue組件,然后將該組件注冊到Vue全局
- 返回包裝過后的definition
- 參數(shù):
-
Vue.directive(id, [definition])
文檔說明:
- 參數(shù):
{string} id
{Function | Object} [definition]
- 用法:
注冊或獲取全局指令荆虱。
源碼定義在 'src/core/global-api/assets.js' 文件中蒿偎,基本邏輯為:
- 如果沒有給定definition朽们,執(zhí)行讀取操作。返回Vue.directives[id]诉位。
- 如果definition是一個函數(shù)骑脱,將definition包裝為一個指令對象
- 然后將該指令注冊到Vue全局,并返回包裝過后的指令對象
- 參數(shù):
-
Vue.filter(id, [definition])
文檔說明:
- 參數(shù):
{string} id
{Function} [definition]
- 用法:
注冊或獲取全局過濾器苍糠。
源碼定義在 'src/core/global-api/assets.js' 文件中叁丧,基本邏輯為:
- 如果沒有給定definition,執(zhí)行讀取操作岳瞭。返回Vue.filters[id]拥娄。
- definition為一個函數(shù),這里稱為過濾器瞳筏。將該過濾器注冊到Vue全局稚瘾,并返回該過濾器
- 參數(shù):