在实际开发中，部分数据，方法会被重复性使用，那么，我们就需要进行混入，官方提供两种方式，全局混入和局部混入，

mixins它就是一个对象，这个对象里面可以包含Vue组件中的一些常见配置，如data、methods、created等等

今天，我们整理下vue2中混入和vue3中的混入方式

一：vue2版本

局部方式，通过mixins属性实现

export const mixins = {
  data() {
    return {
      msg: "我是小白",
    };
  },
  computed: {},
 
  methods: {
    clickMe() {
      console.log("我是mixin中的点击事件");
    },
  },
};
import { mixins } from "./mixin/index";

 mixins: [mixins],

全局方式，直接挂载在原型上，(会影响每个单独创建的 Vue 实例 (包括第三方组件))

import { mixins } from "./mixin/index";

Vue.mixin(mixins);

二：vue3版本，采用函数式编程，用js方式写

export default function getHomeMixin(source: string) {
	let name = ref<string>('小白');
	const componentName = source
	const handleChangeName = (transmitName: string) => {
		name.value = transmitName
	}
	return {
		name,
		componentName,
		handleChangeName
	}
}


<script setup lang="ts">
import getHomeMixin from './homeMixin'
const Mixin = getHomeMixin('我是A组件传的值');
</script>

三：优缺点

1：优点

A：提高代码复用性

B：无需传递状态

C：维护方便

2：缺点

A：命名冲突

B：滥用会导致维护困难

C：追溯源、排查问题麻烦

D：不能轻易重复代码

四：注意点

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

2：默认合并策略下，先执行mixin中生命周期函数中的代码，再执行组件内部的代码(钩子函数不会覆盖，但是methods会覆盖)