vue2采用optionAPI。如:data、methods、watch、computed、lifecyclehookfunctions等。Mixin提供了一种非常灵活的方式在Vue组件中分发可重用的函数。混合对象可以包含任何组件选项。当组件使用mixin对象时,mixin对象的所有选项都会混合到组件本身的Options中。1.如何使用mixin?通俗地说,mixin对象将组件的一些常用选项,如数据中的数据、方法、计算属性、生命周期钩子函数等提取出来,然后引入到组件中,使其与组件本身结合。合并选项。示例1:to:这样做的好处是多个组件可以共享了选项被提取到混合对象中,需要时可以直接导入。2.使用mixin时要注意mixin中包含的选项。同时,这些选项也可以包含在组件中。如果mixin中包含的某些选项具有相同的属性怎么办?比如mixin和组件中有同名的方法,怎么处理?或者当它们都包含生命周期钩子函数时,应该按执行顺序执行哪个?接下来我们就来看看使用mixin时应该注意的几点。2.1.使用mixin对象时,组件包含与mixin相同的选项,如何处理?例子2:mixin对象和实例都包含data选项,{{qdr}}-{{name}}
运行后发现两个变量都可以使用,mixin对象中的数据与实例中的data选项合并。方法和计算也是如此。如果我们将前面示例中的两个变量修改为具有相同的名称,会发生什么情况?2.2.如何处理使用的mixin对象选项和示例中的选项相同的属性?例子3:数据有相同的变量名{{name}}
运行结果,name值为"FrontendPerson"。当属性值相同时,会选择就近原则,优先继承实例中的值,因此mixin对象的属性会被实例中的属性覆盖。2.3.混合对象还可以添加生命周期钩子函数。mixin和实例中的哪一个先执行?示例4:Mixin添加生命周期钩子函数,以mounted为例mounted');}}运行结果:我们发现生命周期函数会组合执行,mixin里面的先执行,然后在instanceof执行。3、mixin自定义属性$options用于当前组件实例的初始化选项,当你需要在options中包含自定义属性时很有用。简单的说,$options是用来在实例中调用mixin自定义属性的。示例5:添加一个自定义属性constmyMixin={custom:'customattribute'}在实例中使用:name属性的优先级如何处理?如果要控制优先级,应该怎么处理呢?4.MergestrategyoptionMergeStrategies选项合并策略,当使用mixin自定义属性和实例冲突的属性时,使用optionMergeStrategies来定义合并规则是的,也就是先用谁的问题。使用规则:app.config.optionMergeStrategies.propertyName=(mixinVal,appVal)=>{returnappVal||mixinVal//决定先返回哪个属性值}根据上面例子5,给实例添加自定义属性,运行到查看结果。示例6:验证mixin和实例属性优先级);//打印结果:appcustom}}发现mixin对象中的属性值被实例中的属性值覆盖了。我们可以借用上面的optionMergeStrategies属性来修改自定义合并规则。在main.js文件中引入:app.config.optionMergeStrategies.custom=(mixinVal,appVal)=>{returnmixinVal||appVal}再次运行后发现打印结果变成了mixin:控制台中的属性值。日志(这个。$options.custom);//打印结果:mixincustom5.全局配置mixin如果项目中有多个组件复用了一些选项,我们可以全局使用mixin对象。一个实例也可以引入多个mixin对象。语法如下:app.mixin([{},{},{}])