快捷導(dǎo)航

Vue3.0插件執(zhí)行原理與實戰(zhàn)

更新時間：2022年02月07日 14:27:46 作者：前端點線

這篇文章主要介紹了Vue3.0插件執(zhí)行原理與實戰(zhàn)，Vue項目能夠使用很多插件來豐富自己的功能Vue-Router、Vuex等，節(jié)省了我們大量的人力和物力，下面我們就一起來了解Vue3.0插件的原理吧，需要的小伙伴可以參考一下

一、編寫插件

Vue項目能夠使用很多插件來豐富自己的功能，例如Vue-Router、Vuex……，這么多插件供我們使用，節(jié)省了我們大量的人力和物力，那這些插件是開發(fā)出來的呢?是不是我們自己也想擁有一個屬于自己的vue插件，下面就展示一下如何寫一個自己的Vue插件。

1.1 包含install()方法的Object

Vue插件可以是一個包含install方法的Object對象，此時插件被調(diào)用時會調(diào)用install方法，

如下所示：

export default {
    // 接收兩個參數(shù)
    // app: 應(yīng)用上下文的實例
    // options：插件輸入的選項
    install: (app, options) => {
        console.log('app', app);
        console.log('options', options);
        // 做一些處理
        // ……
    }
}

1.2 通過function的方式

Vue插件也可以是一個function函數(shù)，此時插件被調(diào)用時會調(diào)用function函數(shù)本身，

如下所示：

export default function TestPlugin(app, options) {
    console.log('app', app);
    console.log('options', options);
}

二、使用插件

上述已經(jīng)闡述了如何編寫自己的插件，插件編寫完了之后就需要使用這些插件了，那這些插件應(yīng)該如何使用呢?其實用起來很簡單，應(yīng)用上下文的實例上提供了對應(yīng)的use方法。

app.use(plugin, [options]); // 返回一個應(yīng)用實例，所以其可以鏈?zhǔn)教砑有碌牟寮?/pre>

三、app.use()是如何執(zhí)行插件的

為什么app.use()可以使用這些插件呢?本著“知其然而知其所以然”的精神，一起來扒一扒為什么。如下是對應(yīng)的源碼：

function createApp(rootComponent, rootProps = null) {
    // ……
    const installedPlugins = new Set();
    const app = (context.app = {
        // ……
        use(plugin, ...options) {
            if (installedPlugins.has(plugin)) {
                warn(`Plugin has already been applied to target app.`);
            }
            else if (plugin && shared.isFunction(plugin.install)) {
                installedPlugins.add(plugin);
                plugin.install(app, ...options);
            }
            else if (shared.isFunction(plugin)) {
                installedPlugins.add(plugin);
                plugin(app, ...options);
            }
            else {
                warn(`A plugin must either be a function or an object with an "install" ` +
                    `function.`);
            }
            return app;
        },
        // ……
    });
    return app;
};

上述代碼讀起來很簡單，其實現(xiàn)了以下幾件事情：