Vue3.0插件执行原理与实战

export default {
    // 接收两个参数
    // app: 应用上下文的实例
    // options：插件输入的选项
    install: (app, options) => {
        console.log('app', app);
        console.log('options', options);
        // 做一些处理
        // ……
    }
}

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

app.use(plugin, [options]); // 返回一个应用实例，所以其可以链式添加新的插件

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;
};