在 Vue.js 开发中，我们可能会有一些可重用的逻辑，比如组件的生命周期方法、数据处理逻辑等。这些逻辑有时候需要被多个组件使用，如果每个组件都写一遍代码，就会造成代码冗余和维护困难。Vue.js 中的 mixin（混入）就是为了解决这个问题而生的，它可以将一些通用的代码逻辑抽象封装起来，让不同的组件可以共享和复用这些逻辑，从而提高开发效率和代码质量。
mixin 的基本使用方法
在 Vue.js 中，我们可以通过 Vue.mixin 方法来定义一个全局的 mixin。示例代码如下：
Vue.mixin({
created() {
console.log('Hello, mixin!')
}
})上面的代码定义了一个名为 created 的生命周期方法，在每个组件创建时都会执行该方法，并输出一行 log。
现在我们可以在任何一个组件中使用这个 mixin，示例代码如下：
const app = new Vue({
el: '#app',
mixins: [mixin],
created() {
// ...
}
})在组件的 mixins 属性中，我们指定了一个名为 mixin 的 mixin。此时，这个组件就会继承 mixin 中定义的 created 生命周期方法，并在组件创建时执行。
mixin 的优先级
如果一个组件和它的 mixin 中都定义了同名的数据选项（如 data、computed 或 methods 等），那么这些数据选项会以一定的优先级进行合并。具体来说，Vue.js 会优先使用组件自身的数据选项，如果组件中没有定义，才会使用 mixin 中的对应数据选项。如果 mixin 和组件中同时定义了同名的钩子函数（如 created），则 mixin 中的钩子函数会先执行。
下面是一组数据选项的合并规则，以 data 为例：
- 如果组件中没有定义某个字符型数据属性，则会使用 mixin 中的对应属性；
- 如果组件和 mixin 都定义了同名的字符型属性，那么以组件的为准；
- 对于对象型数据属性（如
methods、computed等），按照上述规则递归合并其中的子属性。
我们可以通过 Vue.config.optionMergeStrategies 对象来自定义数据选项的合并策略。该对象包含一组钩子函数，用于指定如何合并不同的数据选项。示例代码如下：
Vue.config.optionMergeStrategies.myOption = function (toVal, fromVal) {
// 使用 mixin 中的选项
if (fromVal) {
return fromVal
}
// 否则使用组件中的选项
return toVal
}上面的代码定义了一个名为 myOption 的选项，它的合并策略是优先使用 mixin 中的选项。
mixin 的使用注意事项
- 不要在 mixin 中修改全局状态或实例对象，这会破坏程序的可维护性和健壮性；
- 不要滥用 mixin，否则会让代码变得混乱和难以维护；
- mixin 中的选项会被全部合并到组件中，所以要避免命名重复的数据选项；
- 在 mixin 中定义的全局 mixin 会影响所有组件，在组件较多时可能会导致难以控制的副作用。
总结
Vue.js 中的 mixin 为我们提供了一种轻量级的代码抽象和多个组件间的代码复用机制。它可以让我们更加高效地进行组件开发，但也需要注意 mixin 的使用注意事项。在实际开发中，我们可以根据自己的需求和团队的约定，合理地使用 mixin，从而提高代码的可维护性和可读性。
示例代码
-- -------------------- ---- -------
-- ---- -----
--- ------- - -
------ -
------ -
------ -
-
--
--------- -
------------------- --------
--
--------- -
------------- -
------ ---------- - -
-
--
-------- -
----------- -
------------
-
-
-
-- -- -----
--- --- - --- -----
--- -------
------- ----------
------ -
------ -
------ ------- ----- ---
-
--
--------- -
------------------- ------
--
--------- -
------------ -
------ -------------- ----------------
-
--
-------- -
-------------- -
---------- -- -
-
-
--来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64715cf2968c7c53b0f3dd8e