Vue中插件機制與install的示例分析

這篇文章主要為大家展示了“Vue中插件機制與install的示例分析”，內(nèi)容簡而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領大家一起研究并學習一下“Vue中插件機制與install的示例分析”這篇文章吧。

一、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全局混入是什么呢？相當于在所有的組件中混入這個方法；

• beforeCreate是什么呢？當然是Vue的一個生命周期，在create之前執(zhí)行；
  

既然如此，我們大膽的做一個判斷。Vue-Router其實是在install函數(shù)里面使用了一個全局混入，在beforeCreate這個生命周期觸發(fā)的時候把this.$options.router掛載到Vue的原型上，這樣我們就可以使用this.$router來調用router實例啦。 同學：等一下，stop?。?！你說的我很李姐，但是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');

結合最開始的例子，我們先來分析一波。

• Vue.use()主要是調用插件內(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的使用，不知大家是否有收獲。接下來熱身結束后，我們就可以開始看一看install內(nèi)部實現(xiàn)了，先上源碼。

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

            return this

        }

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

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

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

        return this
    }
}

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

以上是“Vue中插件機制與install的示例分析”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業(yè)資訊頻道！