「Vue3系列」Vue3 混入（mixins）-三、vue3 全局混入

在 Vue 3 中，全局混入（Global Mixins）意味着你想要将某些功能或属性混入到所有的 Vue 组件实例中，而不仅仅是单个组件。全局混入在 Vue 2 中是通过 Vue.mixin() 方法实现的，但在 Vue 3 中，由于架构的改变，并没有直接提供全局混入的方法。

不过，你仍然可以通过创建一个全局组件来模拟全局混入的效果。Vue 3 提供了一个 createApp 方法来创建应用实例，你可以在这个实例上挂载全局方法或属性。

以下是一个如何在 Vue 3 中模拟全局混入的例子：

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

// 定义你想要全局混入的功能
const globalMixin = {
  created() {
    console.log('This is a global mixin!');
  },
  methods: {
    globalMethod() {
      console.log('This is a global method!');
    }
  }
};

// 创建应用实例
const app = createApp(App);

// 在应用实例上挂载全局方法或属性
app.config.globalProperties.$globalMethod = globalMixin.methods.globalMethod;

// 你可以在这里使用 mixin 方法将对象混入到所有组件中
// 但请注意，这并不是真正的全局混入，因为它仍然需要在组件内部通过 this.$options 来访问混入的对象
app.component('my-component', {
  created() {
    // 访问全局混入的方法
    this.$options.created.call(this);
  },
  methods: {
    ...globalMixin.methods
  }
});

// 挂载应用
app.mount('#app');

在这个例子中，我们创建了一个 globalMixin 对象，它包含了想要在全局范围内使用的生命周期钩子和方法。然后，我们通过 app.config.globalProperties 添加了一个全局方法 $globalMethod，这样所有组件都可以通过 this.$globalMethod 来访问这个方法。

Vue 3 并不推荐全局混入，因为它可能导致命名冲突和不可预测的行为。全局混入应该谨慎使用，并且只在确实需要全局共享功能时才考虑。

另外，如果你只是想要在多个组件之间共享一些逻辑，但不希望它们是全局的，你可以考虑使用可重用的 Vue 组合式函数（Composable Functions），这是 Vue 3 Composition API 的一个特性，允许你创建可以在多个组件中复用的逻辑块。