前言：

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

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

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

好啦，閑話不多說，咱們直接開始！?。?/p>

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

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

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

二者其實原理相同，這里我們用Vue-Router來舉例，首先我們來看一下它內(nèi)部install的具體實現(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)于在所有的組件中混入這個方法；
• beforeCreate是什么呢？當(dāng)然是Vue的一個生命周期，在create之前執(zhí)行；
  

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

安啦，這咱們才剛剛解決了第一個問題，下面咱們來填第二個坑。

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

// 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é)合最開始的例子，我們先來分析一波。

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

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

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

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

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

            return this

        }

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

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

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

        return this
    }
}

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

結(jié)語:

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

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

最新評論