vue之混入mixin

混合
基本概念‌
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 },

截图：