对于Mixin（混入）详情介绍_mixins混入有什么作用-优快云博客

本文链接：https://blog.youkuaiyun.com/astar2022/article/details/127814525

本文介绍了Vue.js中的Mixin（混入）概念，它是一种提高代码复用性和维护性的设计思想。Mixins可以包含组件选项如data、computed、methods等，通过局部或全局方式引入到组件中。与Vuex不同，Mixins的数据和方法不会引发全局状态改变，而是独立于组件。在命名冲突时，组件内的数据和方法优先级更高。虽然Mixins有提高复用性的优点，但也可能带来命名冲突和维护难题。正确使用能有效提升开发效率。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.什么是Mixin（混入）

首先呢，Mixin并不是vue中独有的，可以说它是一种思想，也就是和它的名字一样就是混入，在现在的众多开发框架中都已经实现了Mixin（混入）

官方解释：

混入 (mixin) 提供了一种非常灵活的方式，来分发 Vue 组件中的可复用功能。一个混入对象可以包含任意组件选项。当组件使用混入对象时，所有混入对象的选项将被“混合”进入该组件本身的选项。

理解解释：

就是把组件间中一些比较频繁使用的配置与逻辑给提取出来，哪里需要就往哪里混入，这样的话就可以提高代码的复用率，也可以把他理解为组件中的组件，只不过是一些配置与逻辑。

2.Mixin（混入）与vuex的区别

Vuex公共状态管理，如果在一个组件中更改了Vuex中的某个数据，那么其它所有引用了Vuex中该数据的组件也会跟着变化。
Mixin中的数据和方法都是独立的，组件之间使用后是互相不影响的。

3.如何使用

（1）定义Mixin

先在src中新建一个mixin文件夹，再建立一个index.js

// src/mixin/index.js
export const mixins = {
  data() {
    return {};
  },
  computed: {},
  created() {},
  mounted() {},
  methods: {},

（2）局部混入

<script>
import { mixins } from "./mixin/index";
export default {
  name: "App",
  mixins: [mixins],
  components: {},
  created(){
    console.log("组件调用minxi数据",this.msg);
  },
  mounted(){
    console.log("我是组件的mounted生命周期函数")
  }
};
</script>

首先，组件中先import，然后mixins: [mixins]调用

（3）全局混入

修改main.js中的代码

import { mixins } from "./mixin/index";
Vue.mixin(mixins);

之后，所有组件都可以使用mixin中的方法

4.命名冲突

（1）生命周期函数

会先执行mixin中生命周期函数中的代码，然后在执行组件内部的代码

（2）data数据冲突

当mixin中的data数据与组件中的data数据冲突时，组件中的data数据会覆盖mixin中数据

（3）方法命名冲突

当mixin中的methods与组件中的methods名字冲突时，会优先调用组件的methods。

5.优缺点

（1）优点

提高代码复用性
无需传递状态
维护方便，只需要修改一个地方即可

（2）缺点

命名冲突
滥用的话后期很难维护
不好追溯源，排查问题稍显麻烦
不能轻易的重复代码