mixin 是 Vue.js 中用来实现组件复用的一种方式。它允许我们定义一些可复用的选项（如数据、方法、生命周期钩子等），并将它们混入到组件中。这样，我们就可以在不同的组件中复用相同的逻辑代码，提高了代码的复用性和可维护性。

应用场景包括：

在多个组件中复用相同的数据、方法或生命周期钩子等。
在不同阶段的组件中加入特定的逻辑代码，如在 created 阶段添加全局事件监听器。
下面是一个简单的示例，展示了如何使用 mixin 来复用组件选项：

// 定义一个 mixin
const myMixin = {
  data() {
    return {
      message: 'Hello, mixin!'
    };
  },
  methods: {
    greet() {
      console.log(this.message);
    }
  },
  created() {
    console.log('Mixin created');
  }
};
// 定义一个组件，并使用 mixin
Vue.component('my-component', {
  mixins: [myMixin],
  created() {
    console.log('Component created');
  }
});
// 创建 Vue 实例并挂载到页面中
new Vue({
  el: '#app',
  created() {
    console.log('Vue instance created');
  }
});

在上面的示例中，我们定义了一个名为 myMixin 的 mixin，它包含了一个名为 message 的数据属性和一个名为 greet 的方法，还有一个 created 生命周期钩子。然后，我们在一个名为 my-component 的组件中使用了这个 mixin，这样，在 my-component 中就可以直接使用 message 和 greet 了。最后，我们创建了一个 Vue 实例，并挂载到页面中，这个实例中并没有使用 mixin。

运行上面的示例，我们可以看到控制台输出了以下内容：

Copy code
Mixin created
Component created
Vue instance created

这说明 mixin 中的 created 生命周期钩子先于组件的 created 生命周期钩子执行，而 Vue 实例的 created 生命周期钩子最后执行。这样，我们就可以在 mixin 中添加一些全局的逻辑代码，而不需要在每个组件中都添加一遍。