面试题：Vue 中 mixin 和 mixins 的区别是什么？

在 Vue 中，mixin 和 mixins 是用于代码复用的机制，但它们的使用方式和场景有所不同。

1. mixin

mixin 是一个对象，包含可复用的组件选项。你可以通过 Vue.mixin 全局注册一个 mixin，这样它会影响所有 Vue 实例。这种方式通常用于全局混入一些通用的逻辑或功能。

示例：

Vue.mixin({
  created() {
    console.log('全局 mixin 的 created 钩子');
  }
});

new Vue({
  el: '#app',
  created() {
    console.log('组件自身的 created 钩子');
  }
});

在这个例子中，所有 Vue 实例都会执行 mixin 中的 created 钩子。

2. mixins

mixins 是一个数组，用于在组件中局部混入一个或多个 mixin 对象。这种方式允许你在特定组件中复用代码，而不会影响其他组件。

示例：

const myMixin = {
  created() {
    console.log('局部 mixin 的 created 钩子');
  }
};

new Vue({
  el: '#app',
  mixins: [myMixin],
  created() {
    console.log('组件自身的 created 钩子');
  }
});

在这个例子中，只有使用了 myMixin 的组件才会执行 mixin 中的 created 钩子。

区别总结

作用范围：
- mixin：全局混入，影响所有 Vue 实例。
- mixins：局部混入，只影响使用了该 mixin 的组件。
使用方式：
- mixin：通过 Vue.mixin 全局注册。
- mixins：在组件选项中通过 mixins 数组引入。
适用场景：
- mixin：适用于需要在所有组件中共享的逻辑，如全局的日志记录、权限检查等。
- mixins：适用于在特定组件中复用的逻辑，如表单验证、数据获取等。