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

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

Mixin 的主要目的是解决多个组件之间存在相同逻辑时的代码重复问题

今天，我们整理下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版本，采用函数式编程

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会覆盖)