在 Vue 3 中，如何设计一个可扩展的 `Composition API` 插件，并利用 `effectScope` 进行资源管理？

各位观众老爷，大家好！今天给大家带来的是“Vue 3 Composition API 插件的高级玩法：可扩展性与 effectScope 的完美结合”。咱们的目标是，让你的插件像乐高积木一样，想怎么拼就怎么拼，而且还能管好自己的“熊孩子”（资源）。

第一部分：插件设计的基石——理解插件的本质

首先，我们要明确一个概念：Vue 3 的插件本质上就是一个函数。这个函数接收两个参数：app (Vue 应用实例) 和 options (可选的插件配置)。 这个函数的作用就是在 Vue 应用中注册一些东西，例如全局组件、指令、provide/inject、全局属性等等。

// 一个最简单的插件
import { App } from 'vue';

const MyPlugin = {
  install: (app: App, options: any) => {
    // 在这里注册你的组件、指令、属性等等
    console.log('插件已安装！', options);

    app.component('MyComponent', {
      template: '<div>这是一个来自插件的组件</div>',
    });
  },
};

export default MyPlugin;

使用这个插件：

import { createApp } from 'vue';
import MyPlugin from './plugins/MyPlugin';

const app = createApp({});

app.use(MyPlugin, { message: 'Hello from plugin options!' });

app.mount('#app');

这个例子虽然简单，但它揭示了插件的核心机制：一个函数，接收 app 和 options，然后对 app 进行一系列的操作。

第二部分：打造可扩展的插件架构——模块化你的功能

为了让我们的插件更易于维护和扩展，我们需要将功能模块化。这意味着把插件的功能拆分成更小的、独立的模块，每个模块负责一部分特定的任务。

// plugins/MyPlugin/index.ts

import { App } from 'vue';

import componentModule from './modules/componentModule';
import directiveModule from './modules/directiveModule';
import provideModule from './modules/provideModule';

interface PluginOptions {
  prefix?: string;
  // 其他选项
}

const MyPlugin = {
  install: (app: App, options: PluginOptions = {}) => {
    const prefix = options.prefix || 'custom'; // 默认前缀

    componentModule.install(app, prefix);
    directiveModule.install(app, prefix);
    provideModule.install(app, prefix);

    console.log('MyPlugin installed with prefix:', prefix);
  },
};

export default MyPlugin;

然后，我们定义各个模块：

// plugins/MyPlugin/modules/componentModule.ts

import { App } from 'vue';

export default {
  install: (app: App, prefix: string) => {
    app.component(`${prefix}-button`, {
      template: `<button>这是一个带前缀的按钮</button>`,
    });
  },
};

// plugins/MyPlugin/modules/directiveModule.ts

import { App } from 'vue';

export default {
  install: (app: App, prefix: string) => {
    app.directive(`${prefix}-focus`, {
      mounted(el) {
        el.focus();
      },
    });
  },
};

// plugins/MyPlugin/modules/provideModule.ts

import { App } from 'vue';

export default {
  install: (app: App, prefix: string) => {
    app.provide(`${prefix}-message`, 'Hello from provide!');
  },
};

在这个例子中，我们将插件的功能拆分成了三个模块：componentModule、directiveModule 和 provideModule。 每个模块负责注册一个特定类型的资源（组件、指令、provide）。 MyPlugin 的 install 函数负责调用这些模块的 install 函数，并将 app 和 options 传递给它们。 这样，我们的插件就变得更加模块化和易于扩展了。

第三部分：effectScope 的妙用——优雅地管理资源

effectScope 是 Vue 3.2 中引入的一个强大的 API，它可以帮助我们管理副作用的生命周期。 简单来说，它可以将一组副作用（例如 computed、watch、watchEffect）收集到一个作用域中，然后统一管理这些副作用的生命周期。 当作用域失效时，所有在作用域中注册的副作用都会被停止。

在插件开发中，effectScope 可以用来管理插件注册的资源（例如组件、指令）的生命周期。 当插件被卸载时，我们可以使用 effectScope 来停止插件注册的所有副作用，从而避免内存泄漏。

// plugins/MyPlugin/index.ts

import { App, effectScope, onUnmounted } from 'vue';

interface PluginOptions {
  prefix?: string;
  // 其他选项
}

const MyPlugin = {
  install: (app: App, options: PluginOptions = {}) => {
    const prefix = options.prefix || 'custom';

    // 创建一个 effectScope
    const scope = effectScope();

    // 在 scope 中执行副作用
    scope.run(() => {
      app.component(`${prefix}-button`, {
        template: `<button>这是一个带前缀的按钮</button>`,
      });

      app.directive(`${prefix}-focus`, {
        mounted(el) {
          el.focus();
        },
      });

      app.provide(`${prefix}-message`, 'Hello from provide!');

      console.log('插件资源已注册');
    });

    // 在应用卸载时停止 scope
    onUnmounted(() => {
      scope.stop();
      console.log('插件资源已卸载');
    });
  },
};

export default MyPlugin;

在这个例子中，我们首先创建了一个 effectScope。 然后，我们使用 scope.run() 函数在作用域中执行注册组件、指令和 provide 的副作用。 最后，我们使用 onUnmounted 钩子函数在应用卸载时停止作用域。 这样，当应用被卸载时，所有在作用域中注册的副作用都会被停止，从而避免内存泄漏。

第四部分：高级技巧——使用 provide/inject 实现模块间的通信

在大型插件中，不同的模块之间可能需要进行通信。 这时，我们可以使用 provide/inject API 来实现模块间的通信。

// plugins/MyPlugin/index.ts

import { App } from 'vue';
import { createEventBus } from './utils/eventBus'; // 自定义事件总线

import componentModule from './modules/componentModule';
import directiveModule from './modules/directiveModule';

interface PluginOptions {
  prefix?: string;
}

const MyPlugin = {
  install: (app: App, options: PluginOptions = {}) => {
    const prefix = options.prefix || 'custom';

    // 创建事件总线
    const eventBus = createEventBus();

    // Provide 事件总线
    app.provide('my-plugin-event-bus', eventBus);

    componentModule.install(app, prefix, eventBus);
    directiveModule.install(app, prefix, eventBus);

    console.log('MyPlugin installed with prefix:', prefix);
  },
};

export default MyPlugin;

// plugins/MyPlugin/modules/componentModule.ts

import { App, inject } from 'vue';
import { EventBus } from '../utils/eventBus';

export default {
  install: (app: App, prefix: string, eventBus: EventBus) => {
    app.component(`${prefix}-button`, {
      template: `<button @click="handleClick">这是一个带前缀的按钮</button>`,
      setup() {
        const eventBus: EventBus | undefined = inject('my-plugin-event-bus');

        const handleClick = () => {
          eventBus?.emit('button-clicked', '按钮被点击了！');
        };

        return { handleClick };
      },
    });
  },
};

// plugins/MyPlugin/modules/directiveModule.ts

import { App, inject } from 'vue';
import { EventBus } from '../utils/eventBus';

export default {
  install: (app: App, prefix: string, eventBus: EventBus) => {
    app.directive(`${prefix}-focus`, {
      mounted(el) {
        el.focus();

        // 监听事件
        eventBus?.on('button-clicked', (message: string) => {
          console.log('指令收到了消息：', message);
        });
      },
    });
  },
};

// utils/eventBus.ts

type EventCallback<T = any> = (payload: T) => void;

export interface EventBus {
  on<T>(event: string, callback: EventCallback<T>): void;
  emit<T>(event: string, payload: T): void;
  off<T>(event: string, callback: EventCallback<T>): void;
}

export function createEventBus(): EventBus {
  const listeners: { [event: string]: EventCallback[] } = {};

  return {
    on<T>(event: string, callback: EventCallback<T>) {
      if (!listeners[event]) {
        listeners[event] = [];
      }
      listeners[event].push(callback);
    },
    emit<T>(event: string, payload: T) {
      if (listeners[event]) {
        listeners[event].forEach((callback) => {
          callback(payload);
        });
      }
    },
    off<T>(event: string, callback: EventCallback<T>) {
      if (listeners[event]) {
        listeners[event] = listeners[event].filter((cb) => cb !== callback);
      }
    },
  };
}

在这个例子中，我们在 MyPlugin 的 install 函数中创建了一个事件总线，并使用 app.provide() 将其提供给所有组件和指令。 然后，我们在 componentModule 中使用 inject() API 注入事件总线，并在按钮被点击时触发一个事件。 最后，我们在 directiveModule 中使用 inject() API 注入事件总线，并监听按钮被点击的事件。 这样，componentModule 和 directiveModule 之间就可以通过事件总线进行通信了。

第五部分：实战案例——一个可配置的主题插件

现在，让我们来创建一个更完整的实战案例：一个可配置的主题插件。 这个插件允许用户通过配置选项来定制应用的颜色主题。

// plugins/ThemePlugin/index.ts

import { App, reactive, computed, watch } from 'vue';

interface ThemeOptions {
  primaryColor?: string;
  secondaryColor?: string;
}

const ThemePlugin = {
  install: (app: App, options: ThemeOptions = {}) => {
    // 使用 reactive 创建主题状态
    const theme = reactive({
      primaryColor: options.primaryColor || '#42b883',
      secondaryColor: options.secondaryColor || '#35495e',
    });

    // 提供一个计算属性，用于生成 CSS 变量
    const themeVariables = computed(() => ({
      '--primary-color': theme.primaryColor,
      '--secondary-color': theme.secondaryColor,
    }));

    // 监听主题状态的变化，并更新 CSS 变量
    watch(themeVariables, (newVariables) => {
      for (const variable in newVariables) {
        document.documentElement.style.setProperty(variable, newVariables[variable]);
      }
    }, { immediate: true }); // 立即执行一次，初始化 CSS 变量

    // 提供主题状态，供组件使用
    app.provide('theme', theme);

    // 提供一个方法，用于更新主题颜色
    app.provide('updateThemeColor', (color: string, type: 'primary' | 'secondary') => {
      theme[type + 'Color'] = color;
    });

    console.log('ThemePlugin installed');
  },
};

export default ThemePlugin;

使用这个插件：

import { createApp } from 'vue';
import ThemePlugin from './plugins/ThemePlugin';
import App from './App.vue';

const app = createApp(App);

app.use(ThemePlugin, {
  primaryColor: '#ff0000', // 设置默认的主题颜色
  secondaryColor: '#00ff00',
});

app.mount('#app');

在组件中使用：

<template>
  <div class="container">
    <h1>我的应用</h1>
    <button @click="updatePrimaryColor('#0000ff')">修改主题色为蓝色</button>
    <button @click="updateSecondaryColor('#ffff00')">修改辅助色为黄色</button>
    <p>主题色：{{ theme.primaryColor }}</p>
  </div>
</template>

<script setup lang="ts">
import { inject } from 'vue';

// 注入主题状态
const theme: any = inject('theme');
const updateThemeColor: any = inject('updateThemeColor');

const updatePrimaryColor = (color: string) => {
  updateThemeColor(color, 'primary');
};

const updateSecondaryColor = (color: string) => {
  updateThemeColor(color, 'secondary');
};
</script>

<style scoped>
.container {
  padding: 20px;
  border: 1px solid var(--primary-color); /* 使用 CSS 变量 */
}

button {
  background-color: var(--secondary-color); /* 使用 CSS 变量 */
  color: white;
  padding: 10px 20px;
  margin-right: 10px;
  border: none;
  cursor: pointer;
}
</style>

在这个例子中，我们使用 reactive 创建了一个主题状态，并使用 computed 创建了一个计算属性，用于生成 CSS 变量。 然后，我们使用 watch 监听主题状态的变化，并更新 CSS 变量。 最后，我们使用 app.provide() 将主题状态提供给所有组件，并提供了一个方法用于更新主题颜色。 这样，用户就可以通过配置选项来定制应用的颜色主题了。

第六部分：总结与展望

今天我们学习了如何设计一个可扩展的 Vue 3 Composition API 插件，并利用 effectScope 进行资源管理。 我们还学习了如何使用 provide/inject 实现模块间的通信，以及如何创建一个可配置的主题插件。

希望今天的讲座能够帮助你更好地理解 Vue 3 的插件机制，并能够让你在实际项目中开发出更加强大和易于维护的插件。

记住，插件开发就像搭积木，模块化是基础，effectScope 是安全卫士，provide/inject 是沟通桥梁。 掌握了这些，你就能打造出属于你自己的 Vue 3 插件生态圈！

感谢大家的收听！ 下次再见！