小编在之前的项目中并没有接触过minxin（数据混合）。直到一次面试，面试官问我，我才注意到有这么一个东西。今天小编就和大家一起来看看这个神奇的mixin吧。个人感觉mixin和components的注册和使用非常相似。当我们要注册一个partialmixin时，我们可以这样做//组件数据和方法的优先级高于mixin中数据的优先级。当组件和mixin数据同时存在时，使用组件中的数据。如果组件内部没有数据，则使用mixin中的数据//声明循环函数，先执行mixin中的函数，再执行组件中的生命周期函数constmyMinxin={data(){return{num:2}},created(){console.log('mixincreated')},methods:{handleClick(){console.log('mixinhandleClick')}}}constapp=Vue.createApp({data(){return{num:1}},mixins:[myMinxin],methods:{handleClick(){console.log('handleClick')}},created(){console.log('created')},template:`
{{num}}
{{num}}
{{count}}div>`//这个时候是不可用的，因为它是在组件内部定义的，可以理解为本地mixin如果要使用，需要在子组件中使用一个mixin})constvm=app.mount('#root')类似的组件，那么我们要全局注册一个mixin，怎么写呢？constapp=Vue.createApp({data(){return{num:1}},methods:{handleClick(){console.log('handleClick')}},created(){console.log('created')},template:`click`})app.component('child',{template:`点击`})//修改num中的datamixin和data中的strategiesapp.config.optionMergeStrategies.num=(mixinVal,appValue)=>{returnmixinVal||appValue}constvm=app.mount('#root')也可以扫描二维码，关注我微信公众号，蜗牛全栈
{{num}}
{{count}}
`})//通过app.mixin注册全局mixinapp.mixin({data(){return{num:2,count:66}},created(){console.log('mixincreated')},methods:{handleClick(){console.log('mixinhandleClick')}}})constvm=app.mount('#root')从上面的例子我们知道，不管是全局mixin还是局部mixin，如果相同的数据同时存在于组件和mixin中，数据在组件中的优先级总是高于mixin中的，那么有什么办法让mixin中的数据比组件中的数据有更高的优先级，答案是肯定的，我们可以修改vue的配置，像这样constmyMinxin={num:2,}constapp=Vue.createApp({num:1,mixins:[myMinxin],methods:{handleClick(){console.log('handleClick')}},created(){console.log('created')},template:`{{this.$options.num}}
//this.$options.num