vue 混入 mixins

vue2写法

mixins.js

import {reactive} from "vue";

export const mixins = () => {
    data(){
      return{
        test: "混入测试",
      }
    },
    methods:{
      divClick () {
          console.log("divClickMixins");
      };
    },
};

vue文件中引入

import {mixins} from "./mixins"
export default {
    mixins: [ pageMixin ],
    data() {
      return {    	
      }
    }        
}

特性
组件使用mixins中的属性或者方法，当改变mixins的属性值或者是方法内部的一些逻辑操作时，只会在当前组件中起作用而并不会改变混入对象的属性值或者是方法，故其他组件引入mixins并使用其属性或者是方法时是不会受当前组件操作影响的（可类比继承，子继承了父的方法或属性，在子中对继承来的方法或属性做改变，是不会改变父的方法和属性的，更不会影响到其他的子继承父的属性和方法

tips: 请谨慎使用全局混入，因为它会影响每个单独创建的 Vue 实例 (包括第三方组件)。

vue3写法

mixins.ts

import {reactive} from "vue";

export const mixins = () => {
    const mixinsData=reactive({
        test: "混入测试",
    });
    const divClick = () => {
        console.log("divClickMixins");
    };
    return {
        mixinsData,
        divClick,
    };
};

在普通写法中使用混入

<template>
	<div>
		{{mixinsData.test}}
	</div>
	<div @click="divClick">点我</div>
</template>
<script>
import { mixins} from './mixins';

export default {
  data() {
    return {
      ...mixins(),
    };
  },
  methods: {
    divClick () {
      console.log('divClick')
    },
  },
};
</script>

setup写法中使用
mixins.ts

import {reactive} from "vue";

export const mixins = () => {
    const mixinsData=reactive({
        test: "混入测试",
    });
    const divClick = () => {
        console.log("divClickMixins");
    };
    //记得return出去哦
    return {
        mixinsData,
        divClick,
    };
};

vue组件中使用

<template>
	<div>
		{{data.name}}<br>
		{{data.code}}
		{{mixinsData.test}}
	</div>
	<div @click="divClick">点我</div>
</template>

<script setup lang="ts">
	import { ref, onMounted, reactive } from 'vue'
	import {mixins} from './mixins'
	let {mixinsData ,divClick} = mixins()
	const data = reactive({
		name : '111111',
		code : 0
	})
	
	divClick = () => {
		console.log('divClick')
	}
</script>

<style scoped lang="scss">

</style>

注意事项
在使用Vue 3的混入(mixins)功能时，有一些需要注意的地方：

1.冲突：如果混入(mixins)和组件本身的选项冲突，组件本身的选项将会优先生效。如果有冲突的选项，可以使用相同的名字创建组件本身的选项来覆盖混入(mixins)的选项。

2.生命周期钩子：Vue 3中的混入(mixins)中的生命周期钩子函数会在组件的生命周期之前调用。如果有多个混入(mixins)，它们的生命周期钩子函数将按照混入(mixins)的声明顺序依次调用。

3.响应式属性：Vue 3中的混入(mixins)在组件内部使用的响应式属性需要在组件内部声明，否则它们将不会被响应式地追踪。

4.方法和计算属性：Vue 3中的混入(mixins)中的方法和计算属性会与组件本身的方法和计算属性合并。如果有冲突的方法或计算属性，组件本身的方法和计算属性将会覆盖混入(mixins)的方法和计算属性。

5.全局混入(mixins)：Vue 3中已经移除了全局混入(mixins)的功能，不再推荐使用全局混入(mixins)。如果需要在多个组件中共享代码，可以考虑使用Composition API或自定义指令等其他方式。

6.在使用Vue 3的混入(mixins)时，需要注意组件选项冲突、生命周期钩子的调用顺序、响应式属性的声明和覆盖、方法和计算属性的合并，以及全局混入(mixins)的移除。