小编在之前的我的项目中还没有接触过minxin(数据混入)，直到一次面试的时候，面试官问我，我才留神到，原来还有这样的一个货色，明天小编就和大家一起看看这个神奇的mixin。个人感觉mixin和组件的注册和应用很相似，咱们要注册一个部分的mixin的时候，能够这样
// 组件data和methods优先级高于mixin中的data优先级，组件和mixin数据同时存在的时候，应用组件中的data数据，如果组件外部没有data，应用mixin中的数据// 申明周期函数，先执行mixin外面的，再执行组件外面的生命周期函数const myMinxin = { data(){ return { num: 2 } }, created(){ console.log('mixin created') }, methods:{ handleClick(){ console.log('mixin handleClick') } }}const app = Vue.createApp({ data(){ return { num: 1 } }, mixins:[myMinxin], methods:{ handleClick(){ console.log('handleClick') } }, created(){ console.log('created') }, template:`<div>{{ num }}</div> <button @click="handleClick">点击</button>`})const vm = app.mount('#root')之所以叫下面的组件为部分组件，是因为只能在哪个组件内注册，在哪个组件外部应用，在有子组件的时候，并不能获取到数据混入的数据，就像这样
const myMinxin = { data(){ return { num: 2, count:66 } }, created(){ console.log('mixin created') }, methods:{ handleClick(){ console.log('mixin handleClick') } }}const app = Vue.createApp({ data(){ return { num: 1 } }, mixins:[myMinxin], methods:{ handleClick(){ console.log('handleClick') } }, created(){ console.log('created') }, template:`<div>{{ num }}</div> <child /> <button @click="handleClick">点击</button>`})app.component('child',{ template:`<div>{{ count }}</div>` // 这个时候，就获取不到了，因为是在组件外部定义的，能够了解成部分的mixin。如果想用的话，须要在子组件中，也用一个mixin})const vm = app.mount('#root')相似组件，那咱们想全局注册一个mixin，要怎么写呢？
const app = Vue.createApp({ data(){ return { num: 1 } }, methods:{ handleClick(){ console.log('handleClick') } }, created(){ console.log('created') }, template:`<div>{{ num }}</div> <child /> <button @click="handleClick">点击</button>`})app.component('child',{ template:`<div>{{ count }}</div>`})// 通过app.mixin注册全局mixinapp.mixin({ data(){ return { num: 2, count:66 } }, created(){ console.log('mixin created') }, methods:{ handleClick(){ console.log('mixin handleClick') } }})const vm = app.mount('#root')从下面的几个例子，咱们晓得，不论是全局mixin还是部分mixin，如果组件和mixin中同时存在雷同的数据，组件内的数据优先级总是高于mixin中的数据，那么有没有什么方法，让mixin内的数据优先级高于组件内呢，答案是必定的，咱们能够批改Vue的配置，就像这样
const myMinxin = { num: 2,}const app = Vue.createApp({ num: 1, mixins:[myMinxin], methods:{ handleClick(){ console.log('handleClick') } }, created(){ console.log('created') }, template:`<div>{{ this.$options.num }}</div> // this.$options.num <button @click="handleClick">点击</button>`})// 批改num中的数据混入和data中的策略app.config.optionMergeStrategies.num = (mixinVal,appValue) => { return mixinVal || appValue}const vm = app.mount('#root')大家还能够扫描二维码，关注我的微信公众号，蜗牛全栈。