混合
基本概念
Mixin 是 Vue 中用于复用组件逻辑的机制，可将多个组件的公共选项（如 data、methods、生命周期钩子）抽离为独立模块，再混入到组件中。
比如我有两个组件同时用到了同一个数据name，同一个方法showAddress
把这写公共的部分可以提取出来，放在一个公共的hunhe.js文件中，
2. 核心特性
选项合并策略
data：组件数据优先，Mixin 数据次之（递归合并）。
methods/components：同名时组件覆盖 Mixin。
生命周期钩子：Mixin 钩子先执行，组件钩子后执行。
全局与局部混入
javascript
// 局部混入（组件内）
const myMixin = { methods: { log() { console.log(‘Mixin’); } } };
export default { mixins: [myMixin] };
// 全局混入（慎用！影响所有组件）
Vue.mixin({ created() { console.log(‘Global Mixin’); } });
3. 适用场景
逻辑复用：如表单验证、日志记录等通用功能。
跨组件共享：多个组件需相同生命周期逻辑（如埋点）。
4. 潜在问题与替代方案
命名冲突：需规范 Mixin 命名（如加前缀 mixin_）。
维护困难：过度使用会导致代码难以追踪，推荐优先使用组合式 API（Vue 3）。
5.实例
mixin.js
export const hunlu={
data(){
return {
name:'我就是name'
}
},
}
export const hunlu2={
methods: {
showAddress(){
alert(this.address);
}
},
}
school.vue
<template>
<div>
<div>{{ name }}</div>
<div @click="showAddress">{{ address }}</div>
</div>
</template>
<script>
import {hunlu,hunlu2} from '@/utils/mixin.js'
export default {
data() {
return{
address:'北京西二旗'
}
},
mixins:[hunlu,hunlu2]
}
</script>
student.vue
<template>
<div>
<div>{{ name }}</div>
<div @click="showAddress">{{ address }}</div>
</div>
</template>
<script>
import {hunlu,hunlu2} from '@/utils/mixin.js'
export default {
data() {
return{
address:'北京三里屯'
}
},
mixins:[hunlu,hunlu2]
}
</script>
父组件：
<template>
<div class="app-container">
<school></school>
<student></student>
</div>
</template>
import school from './components/school.vue'
import student from './components/student'
components: { AddMask,school,student },
截图：