vue3.0mixinmixin

时间：2023-04-01 11:21:56 vue.js

首先是官方定义：mixin（混入）提供了一种非常灵活的方式来在Vue组件中分发可重用的功能。混合对象可以包含任意组件选项。当组件使用mixin时，mixin的所有选项都将“混合”到组件自己的选项中。通俗地说，就是将mixin中的属性，比如数据、方法或者自定义属性，混合到所有或者指定的组件中，让这些组件调用mixin中定义的属性或者事件。首先我们直接定义Globalmixin//Definitionofglobalmixinapp.mixin({message:'mixin',data(){return{count:100,};},});mixedintodata全局mixin默认会混入所有组件，接下来，我们再定义一个组件，在模板中插入message字段，如下所示：constapp=Vue.createApp({template:`

`,});这时，mixin中的data属性就会被混入到组件中。虽然组件的数据中不包含message字段，但是message的值在运行页面中仍然显示为mixinmessage。现在，我们还将消息字段添加到组件内部的数据中。constapp=Vue.createApp({data(){return{message:'appmessage'}}...});这时，页面运行时，模板中的内容会在组件中的数据中显示valueappmessage，这是说明组件内部数据的优先级高于内部数据的优先级混入。混入事件（方法）同样，我们也可以测试事件的优先级constapp=Vue.createApp({...methods:{handleClick(){console.log('appclick');}},//点击这里的元素将打印出“appclick”模板：“{{message}}

"});//定义全局mixinapp.mixin({...methods:{handleClick(){console.log('mixinclick');}}});点击div，会打印出appclick，也就是说当mixin和组件中都存在handleClick事件时，组件中同名事件的优先级会更高。混入生命周期函数（created、mounted等），我们在两者中定义created函数constapp=Vue.createApp({...created(){console.log("appcreated");}})混合和应用程序；//定义一个全局的mixinapp.mixin({created(){...console.log("mixincreated");}});运行这个页面，打印站会输出mixincreatedappcreated也就是mixin中的lifeperiodichook函数和app组件中的hook函数都会运行，先执行mixin来mixincustomproperties.我们也可以直接在mixin和app组件中自定义属性。自定义属性需要在模板中调用$options[prop]constapp=Vue.createApp({message:"appmessage",template:"{{$options.message}}

"});//定义全局mixinapp.mixin({message:"mixinmessage"});运行页面，模板会在app组件的message中显示valueappmessage，可见，自定义属性也是Components比mixins有更高的优先级。修改自定义属性合并策略如果我们希望mixin的优先级高于组件，可以通过如下代码修改app.config.optionMergeStrategies.message=(mixinVal,appVal)=>{returnmixinVal||应用价值；};mergestrategy方法接受两个参数，第一个参数是mixin自定义属性值，第二个参数是app组件自定义属性值，用户可以通过定义自定义属性优先级的方法来决定返回哪个值。上面的代码定义了如果mixinVal有值则返回mixinValue，否则返回appVal，所以模板中应该显示的是mixinmessage。本地组件本地组件的定义需要在组件中显式声明。//1.声明局部组件变量constMyMixin={data(){return{};},created(){console.log('mixincreated');},methods:{handleClick(){},},};//2.通过mixins属性注入到要混入的组件中constapp=Vue.createApp({mixins:[myMixin]})除了需要通过mixins属性注入，与全局组件相同，不再单独阐述。Defectmixin可以将一些组件提取到可重用的块中，但它也存在不可避免的问题。Mixin很容易发生冲突，你不知道一个值是来自mixin还是来自应用程序。复用性有限，不能通过传参修改mixin的逻辑，降低了抽象逻辑的灵活性。总结这篇文章，我们讲了以下几点：mixin的概念和定义与自定义属性混合的数据、方法、生命周期函数，修改自定义属性全局mixin和局部mixin定义方法mixin的混合策略缺陷