前言：

我們?cè)谑褂肰ue的時(shí)候，經(jīng)常會(huì)使用并寫(xiě)一些自定義的插件，然后利用Vue.use引入。所以提到寫(xiě)插件，install這個(gè)方法是必不可少的。Vue.js 的插件應(yīng)該暴露一個(gè) `install` 方法。這個(gè)方法的第一個(gè)參數(shù)是 `Vue` 構(gòu)造器，第二個(gè)參數(shù)是一個(gè)可選的選項(xiàng)對(duì)象。這是Vue官方對(duì)Vue插件的規(guī)范。那這install函數(shù)到底是什么東東呢，Vue內(nèi)部到底用它做了什么處理，怎么調(diào)用的，今天我就給大家伙從源碼層面把他整的明明白白。

看完這篇文章，你將學(xué)到：

• install函數(shù)可以做些什么；
• install內(nèi)部是怎么實(shí)現(xiàn)的；
• Vuex，Vue-Router插件在install期間到底干了什么；
  

好啦，閑話不多說(shuō)，咱們直接開(kāi)始！?。?/p>

一、install在Vuex&Vue-Router中的處理

這里先拋出兩個(gè)問(wèn)題，大家可以思考下，算是挖坑，下面再逐一解答：

• 為什么我們?cè)陧?xiàng)目中可以直接使用$router $store來(lái)獲取其中的值以及一些方法；
• 為什么使用這倆插件都是先用Vue.use引入。然后才創(chuàng)建實(shí)例，在Vue實(shí)例中傳入；
  

二者其實(shí)原理相同，這里我們用Vue-Router來(lái)舉例，首先我們來(lái)看一下它內(nèi)部install的具體實(shí)現(xiàn)：

class Router {
    constructor(options) {
        ...
    }
}

Router.install = function(_Vue) {

    _Vue.mixin({
        beforeCreate() {
            if (this.$options.router) {
                _Vue.prototype.$router = this.$options.router
            }
        }
    })

}

export default Router;

• _Vue.mixin全局混入是什么呢？相當(dāng)于在所有的組件中混入這個(gè)方法；
• beforeCreate是什么呢？當(dāng)然是Vue的一個(gè)生命周期，在create之前執(zhí)行；
  

既然如此，我們大膽的做一個(gè)判斷。Vue-Router其實(shí)是在install函數(shù)里面使用了一個(gè)全局混入，在beforeCreate這個(gè)生命周期觸發(fā)的時(shí)候把this.$options.router掛載到Vue的原型上，這樣我們就可以使用this.$router來(lái)調(diào)用router實(shí)例啦。 同學(xué)：等一下，stop?。?！你說(shuō)的我很李姐，但是this.$options.router這又是什么東西，從哪來(lái)的??？

安啦，這咱們才剛剛解決了第一個(gè)問(wèn)題，下面咱們來(lái)填第二個(gè)坑。

咱們平時(shí)使用Vue-Router，以及定義入口文件的Vue實(shí)例大概是這樣子

// router/index.js
import VueRouter form 'vue-router';
import Vue from 'vue';

Vue.use(VueRouter);

const _router = [
    ...
]

const Router = new VueRouter(_router);

export default Router;

// main.js
import Vue from 'vue';
import router from 'router';

new Vue({
    router,
    ...
}).$mount('#app');

結(jié)合最開(kāi)始的例子，我們先來(lái)分析一波。

• Vue.use()主要是調(diào)用插件內(nèi)部的install方法，并將Vue實(shí)例作為參數(shù)傳入；
• 上面使用的是this.$options.router，options通常代表的是配置項(xiàng)；
• 在main.js中我們把Router實(shí)例作為配置項(xiàng)傳入到Vue實(shí)例中
  

叮?。?！要素察覺(jué)，那我們來(lái)大膽推測(cè)一波。 Vue-Router先use其實(shí)是做了一個(gè)全局混入，為了在合適的時(shí)間點(diǎn)，獲取到Vue根實(shí)例配置項(xiàng)中的router實(shí)例，執(zhí)行掛載。緊接著在new Vue()根實(shí)例創(chuàng)建的時(shí)候，注入router實(shí)例，然后觸發(fā)全局混入中的生命周期，這個(gè)時(shí)候根實(shí)例的配置項(xiàng)this.$options已經(jīng)包含了router實(shí)例，最后完成掛載流程?。?！ 光這一段的代碼也是邏輯縝密，編程思路巧妙，令人直呼內(nèi)行啊！兄弟萌，把內(nèi)行打在公屏上，hhhh。

二、install在Vue中的內(nèi)部實(shí)現(xiàn)

看完了常用庫(kù)install的使用，不知大家是否有收獲。接下來(lái)熱身結(jié)束后，我們就可以開(kāi)始看一看install內(nèi)部實(shí)現(xiàn)了，先上源碼。

export function initUse (Vue: GlobalAPI) {
    // 注冊(cè)一個(gè)掛載在實(shí)例上的use方法
    Vue.use = function (plugin: Function | Object) {
        // 初始化當(dāng)前插件的數(shù)組
        const installedPlugins = (this._installedPlugins || (this._installedPlugins = []))
        // 如果這個(gè)插件已經(jīng)被注冊(cè)過(guò)了，那就不作處理
        if (installedPlugins.indexOf(plugin) > -1) {

            return this

        }

        ...
        
        // 重點(diǎn)來(lái)了哦！?。?
        if (typeof plugin.install === 'function') {
        // 當(dāng)插件中install是一個(gè)函數(shù)的時(shí)候，調(diào)用install方法，指向插件，并把一眾參數(shù)傳入
            plugin.install.apply(plugin, args)

        } else if (typeof plugin === 'function') {
        // 當(dāng)插件本身就是一個(gè)函數(shù)的時(shí)候，把它當(dāng)做install方法，指向插件，并把一眾參數(shù)傳入
            plugin.apply(null, args)

        }
        
        // 將插件放入插件數(shù)組中
        installedPlugins.push(plugin)

        return this
    }
}

源碼這部分寫(xiě)的很簡(jiǎn)潔，可讀性很高。就是在use的時(shí)候，判斷插件類型，執(zhí)行install或者插件本身。其實(shí)細(xì)化一下官網(wǎng)的解釋就是，Class類的插件應(yīng)該暴露一個(gè) install 方法。

結(jié)語(yǔ):

不知道大家對(duì)于Vue的插件機(jī)制有沒(méi)有更深入的了解呢？其實(shí)開(kāi)發(fā)插件的時(shí)候利用install我們可以做很多其他的事兒。 比如Vue-Router在install中其實(shí)還注冊(cè)了Router-view和Router-link的全局組件。

到此這篇關(guān)于深入理解Vue的插件機(jī)制與install詳細(xì)的文章就介紹到這了,更多相關(guān)深入理解Vue的插件機(jī)制與install內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論