vue2的混入mixin使用

约 842 字大约 3 分钟

2025-08-01

前言

vue3 中不再推荐使用 mixins ！

在 Vue 2 中， mixins 是创建可重用组件逻辑的主要方式。

尽管在 Vue 3 中保留了 mixins 支持，但对于组件间的逻辑复用，使用组合式 API 的组合式函数是现在更推荐的方式。

混入的优点

可复用性强，方便提高组件代码复用，不用传递状态，可以修改一个地方引起全局都被修改的效果。

混入的缺点

不清晰的数据来源：当使用了多个 mixin 时，实例上的数据属性来自哪个 mixin 变得不清晰，这使追溯实现和理解组件行为变得困难。这也是推荐在组合式函数中使用 ref + 解构模式的理由：让属性的来源在消费组件时一目了然。
命名空间冲突：多个来自不同作者的 mixin 可能会注册相同的属性名，造成命名冲突。若使用组合式函数，你可以通过在解构变量时对变量进行重命名来避免相同的键名。
隐式的跨 mixin 交流：多个 mixin 需要依赖共享的属性名来进行相互作用，这使得它们隐性地耦合在一起。而一个组合式函数的返回值可以作为另一个组合式函数的参数被传入，像普通函数那样。

mixin 使用方法

下面开始介绍混入的使用方法。

在 src 下新建 mixins 文件夹，然后新建一个空白 js 文件

.vue 文件的结构如下，把其中的 script 部分复制出来，放到刚才的testMixin.js中

test.vue

<template>
  <div>
    <h1>Mixins</h1>
  </div>
</template>

<script>
export default {
  components: {},
  data() {
    return {};
  },
  mounted() {},
  computed: {},
  methods: {},
};
</script>
<style scoped></style>

testMixin.js

export default {
  data() {
    return {};
  },
  mounted() {},
  computed: {},
  methods: {},
};

在 test.vue 中引入 mixins 文件

此时我们就可以使用 testMixin.js 中的内容了。当然现在 mixin 中的内容都是空的，所以下一步是增加 testMixin.js 中的内容。

Mixins 特性

生命周期方法重复时合并执行，但混入对象的钩子将在组件自身钩子之前调用。
变量和方法发生冲突时，优先用组件内部的变量/方法（组件的 data、methods、filters 会覆盖 mixins 里的同名 data、methods、filters）
mixin 可以定义公用的变量或方法，但是 mixin 中的数据是独立不共享的，即每个组件中的 mixin 实例都不一样，是单独存在的个体，不存在相互影响；
不同 mixin 里的同名方法，按照引进的顺序，最后的覆盖前面的同名方法。