上一節(jié)我們結(jié)合代碼和文檔，詳細(xì)介紹了Global Config，下面我們?cè)敿?xì)來(lái)看看Global API。

Global API

OK，結(jié)合官方文檔和代碼細(xì)節(jié)，我們來(lái)看看這些 Global API 的具體用法：

• Vue.set(object, key, value)

  文檔說(shuō)明：

  • 參數(shù)：
    • {Object} object
    • {string} key
    • {any} value
  • 返回值：設(shè)置的值（從代碼細(xì)節(jié)中看，這個(gè)描述不是很?chē)?yán)謹(jǐn)）
  • 用法：
    設(shè)置對(duì)象的屬性。如果對(duì)象是響應(yīng)式的，確保屬性被創(chuàng)建后也是響應(yīng)式的，同時(shí)觸發(fā)視圖更新。這個(gè)方法主要用于避開(kāi) Vue 不能檢測(cè)屬性被添加的限制。
    注意對(duì)象不能是 Vue 實(shí)例，或者 Vue 實(shí)例的根數(shù)據(jù)對(duì)象。

  源碼定義在 'src/core/observer/index.js' 文件中，基本邏輯為：

  1. 如果object是數(shù)組，將value插入到key對(duì)應(yīng)的位置，直接返回value
  2. 如果object對(duì)象自身含有key屬性，將該屬性值更新為vlaue。然后返回
  3. 如果object是Vue實(shí)例對(duì)象，或者是Vue實(shí)例對(duì)象的根數(shù)據(jù)對(duì)象，給出警告信息（開(kāi)發(fā)模式）然后直接返回，不做處理
  4. 如果object沒(méi)有被追蹤（observed），則為object增加或修改key屬性，之后返回
  5. 如果不是以上情況，則為object增加響應(yīng)式屬性，并觸發(fā)視圖更新。返回value。（這部分涉及到Vue的響應(yīng)式設(shè)計(jì)原理，后續(xù)會(huì)深入研究）

• Vue.delete(object, key)

  文檔說(shuō)明：

  • 參數(shù)：
    • {Object} object
    • {string} key
  • 用法：
    刪除對(duì)象的屬性。如果對(duì)象是響應(yīng)式的，確保刪除能觸發(fā)更新視圖。這個(gè)方法主要用于避開(kāi) Vue 不能檢測(cè)到屬性被刪除的限制，但是你應(yīng)該很少會(huì)使用它。
    注意對(duì)象不能是 Vue 實(shí)例，或者 Vue 實(shí)例的根數(shù)據(jù)對(duì)象

  源碼定義在 'src/core/observer/index.js' 文件中，基本邏輯為：

  1. 如果object是Vue實(shí)例對(duì)象，或者是Vue實(shí)例對(duì)象的根數(shù)據(jù)對(duì)象，給出警告信息（開(kāi)發(fā)模式）然后直接返回，不做處理
  2. 如果object對(duì)象自身沒(méi)有key屬性，直接返回不做處理
  3. 如果不是以上情況，直接刪除object的key屬性。如果object沒(méi)有被追蹤（observed），則直接返回，否則觸發(fā)視圖更新。

• Vue.nextTick([callback, context])

  文檔說(shuō)明：

  • 參數(shù)：
    • {Function} [callback]
    • {Object} [context]
  • 用法：
    在下次 DOM 更新循環(huán)結(jié)束之后執(zhí)行延遲回調(diào)。在修改數(shù)據(jù)之后立即使用這個(gè)方法，獲取更新后的 DOM。
    這里涉及到Vue的異步更新隊(duì)列，后續(xù)會(huì)深入研究。

  源碼定義在 'src/core/util/env.js' 文件中，使用閉包和立即執(zhí)行函數(shù)返回一個(gè) queueNextTick 函數(shù)，從而實(shí)現(xiàn)了一個(gè)異步隊(duì)列機(jī)制。
  代碼看似復(fù)雜，其實(shí)本質(zhì)上就是以異步隊(duì)列的方式，使用給定上下文context來(lái)執(zhí)行callback函數(shù)。

• Vue.use(plugin)

  文檔說(shuō)明：

  • 參數(shù)：
    • {Object | Function} plugin
  • 用法：
    安裝 Vue.js 插件。如果插件是一個(gè)對(duì)象，必須提供 install 方法。如果插件是一個(gè)函數(shù)，它會(huì)被作為 install 方法。install 方法將被作為 Vue 的參數(shù)調(diào)用。
    當(dāng) install 方法被同一個(gè)插件多次調(diào)用，插件將只會(huì)被安裝一次。

  源碼定義在 'src/core/global-api/use.js' 文件中，基本邏輯為：

  1. 如果plugin已經(jīng)安裝（通過(guò)plugin的installed屬性），則直接返回，不做處理
  2. 如果plugin.install是一個(gè)函數(shù)，則執(zhí)行plugin.install（傳入的plugin為對(duì)象）。否則直接執(zhí)行plugin（傳入的plugin為函數(shù)）。
  3. 將plugin的installed屬性設(shè)置為true

• Vue.mixin(mixin)

  文檔說(shuō)明：

  • 參數(shù)：
    • {Object} mixin
  • 用法：
    全局注冊(cè)一個(gè)混合，影響注冊(cè)之后所有創(chuàng)建的每個(gè) Vue 實(shí)例。插件作者可以使用混合，向組件注入自定義的行為。
    不推薦在應(yīng)用代碼中使用。

  源碼定義在 'src/core/global-api/mixin.js' 文件中，代碼非常簡(jiǎn)短，就是要向Vue.options合并其他選項(xiàng)。
  具體是通過(guò)調(diào)用 mergeOptions 函數(shù)實(shí)現(xiàn)的，有關(guān)的信息曾經(jīng)在 Global Config 的 Vue.config.optionMergeStrategies 部分介紹過(guò)。

• Vue.extend(options)

  文檔說(shuō)明：

  • 參數(shù)：
    • {Object} options
  • 用法：
    使用基礎(chǔ) Vue 構(gòu)造器，創(chuàng)建一個(gè)“子類(lèi)”。參數(shù)是一個(gè)包含組件選項(xiàng)的對(duì)象。
    data 選項(xiàng)是特例，需要注意 - 在 Vue.extend() 中它必須是函數(shù)。（關(guān)于為何data必須是函數(shù)，可以在Vue預(yù)定義的屬性合并策路中找到。 'src/core/util/options.js' 文件中 'strats.data' 的定義。其它有關(guān)屬性合并策略的信息，請(qǐng)參考 Global Config 的 Vue.config.optionMergeStrategies 部分）

  源碼定義在 'src/core/global-api/extend.js' 文件中，基本邏輯為：

  1. 處理cid相關(guān)
  2. 判斷options中的name，只可包含數(shù)字，字母和連接符-
  3. 定義Super指向Vue構(gòu)造器，使用構(gòu)造器模式和原型繼承模式構(gòu)建一個(gè)Sub繼承Super。
  4. 調(diào)用 mergeOptions 函數(shù)合并屬性，并賦值給Sub。
  5. 將Super的全局函數(shù)（use，mixin，extend，component，directive，filter等）賦值給Sub。
  6. 在Sub中記錄Super信息：Sub['super']= Super; Sub['superOptions'] = Super.options;。

• Vue.component(id, [definition])

  文檔說(shuō)明：

  • 參數(shù)：
    • {string} id
    • {Function | Object} [definition]
  • 用法：
    注冊(cè)或獲取全局組件。注冊(cè)還會(huì)自動(dòng)使用給定的id設(shè)置組件的名稱(chēng)。

  源碼定義在 'src/core/global-api/assets.js' 文件中，基本邏輯為：

  1. 如果沒(méi)有給定definition，執(zhí)行讀取操作。返回Vue.components[id]。
  2. 否則，判斷給定id的值是否為保留字，是保留字的話(huà)，給出警告信息（開(kāi)發(fā)模式下）。
  3. 如果在definition中沒(méi)有給定name屬性，則使用id作為name屬性的值
  4. 默認(rèn)調(diào)用Vue.extend，將definition包裝為Vue組件，然后將該組件注冊(cè)到Vue全局
  5. 返回包裝過(guò)后的definition

• Vue.directive(id, [definition])

  文檔說(shuō)明：

  • 參數(shù)：
    • {string} id
    • {Function | Object} [definition]
  • 用法：
    注冊(cè)或獲取全局指令。

  源碼定義在 'src/core/global-api/assets.js' 文件中，基本邏輯為：

  1. 如果沒(méi)有給定definition，執(zhí)行讀取操作。返回Vue.directives[id]。
  2. 如果definition是一個(gè)函數(shù)，將definition包裝為一個(gè)指令對(duì)象
  3. 然后將該指令注冊(cè)到Vue全局，并返回包裝過(guò)后的指令對(duì)象

• Vue.filter(id, [definition])

  文檔說(shuō)明：

  • 參數(shù)：
    • {string} id
    • {Function} [definition]
  • 用法：
    注冊(cè)或獲取全局過(guò)濾器。

  源碼定義在 'src/core/global-api/assets.js' 文件中，基本邏輯為：

  1. 如果沒(méi)有給定definition，執(zhí)行讀取操作。返回Vue.filters[id]。
  2. definition為一個(gè)函數(shù)，這里稱(chēng)為過(guò)濾器。將該過(guò)濾器注冊(cè)到Vue全局，并返回該過(guò)濾器