组件继承合并--Vue.mixin

r囧r小猫 2023-06-22 03:28 17阅读 0赞

我们在用Vue进行前端开发的时候，往往会遇到有很多个组件内，他们都有类似的data，类似的方法。这些大量重复的代码，如果正常编写出来，代码既不美观也不优雅，而且看起来也相当复杂。所以vue官方提供了一个极其好用的方式来解决这个问题

### 那就是mixin ###

先来看看官方的介绍

> 混入 (mixin) 提供了一种非常灵活的方式，来分发 Vue 组件中的可复用功能。一个混入对象可以包含任意组件选项。当组件使用混入对象时，所有混入对象的选项将被“混合”进入该组件本身的选项。

在Java开发中 如果我们遇到两个类有大量相似代码的时候，我们通常会定义一个父类，来讲这些重复代码写在一起，然后再让这两个类来继承父类的代码和方法。

class Animal{
        run(){}
    }
    class Person extends Animal{
        //run(){}
    }
    class Dog extends Animal{
        //run(){}
    }

而在Vue中，每个组件export出来的是对象，所以不能像类那样继承，于是Vue提供了类似于类的继承的方法 **mixin**

使用方法，在这里贴上自己项目的部分代码。

定义一个mixin.js 文件

import {debounce} from './utils';
    
    export const itemListenerMixin = {
        data(){
            return {
                itemImgListener: null,
            }
        },
        methods:{
    
        },
        mounted(){
            let newRefresh = debounce(this.$refs.scroll.refresh, 100)
    
            this.itemImgListener = () => {
                newRefresh()
            }
    
            this.$bus.$on('itemImgLoad', this.itemImgListener)
            console.log("我是混入的东西")
        }
    }

mixin 里就跟一个正常的Vue的组件没有任何的区别，可以定义data，methods，生命周期函数等等。跟Java里面的父类和子类完全一样。只是调用的方法不一样而已。

两个调用mixin.js的组件

Detail.vue

import {itemListenerMixin} from "common/mixin";
    
    mixins: [itemListenerMixin],
    //其余代码均省略

Home.vue

import {itemListenerMixin} from "common/mixin";
    
    mixins: [itemListenerMixin],
    //其余代码均省略

只需要这样一小段代码，就可以调用到mixin.js 内定义的组件了。

而且在两个组件内，作用完全一样

当我们在组件上应用Mixin的时候，有可能组件与Mixin中都定义了相同的生命周期钩子，这时候钩子的**执行顺序**的问题凸显了出来。默认Mixin上会首先被注册，组件上的接着注册，这样我们就可以在组件中按需要重写Mixin中的语句。***组件拥有最终发言权***。当发生冲突并且这个组件就不得不“决定”哪个胜出的时候，这一点就显得特别重要，否则，所有的东西都被放在一个数组当中执行，Mixin将要被先推入数组，其次才是组件。

const myMixin = {
        mounted() {
        console.log('mixin!')
        }
    }
    
    new Vue({
        el: '#app',
        mixins: [myMixin],
        mounted() {
        console.log('Vue instance!')
        }
    });
    
      //Output in console
      > mixin!
      > Vue instance!

//mixin
    const myMixin = {
        methods: {
        sayHello: function() {
            console.log('mixin!')
        }
    },
        mounted() {
            this.sayHello()
        }
    }
    
    //vue instance or component
    new Vue({
        el: '#app',
        mixins: [myMixin],
        methods: {
        sayHello: function() {
        console.log('Vue instance!')
        }
    },
    mounted() {
        this.sayHello()
        }
    })
    
    // Output in console
    > Vue instance!
    > Vue instance!

我们可以看到，当他们之间没有发生同名冲突的时候，两个都正常打印了。而当他们发生冲突之后。你可以看到这里打印了两个Vue instance。这是因为第一个函数被调用之后，并没有被销毁，而是被重写了。然后被调用了两次

当组件和混入对象含有同名选项时，这些选项将以恰当的方式混合。

选项合并

*  数据对象（data）在内部会进行递归合并，在和组件的数据发生冲突时以组件数据优先。
 *  同名钩子函数（created,mounted...）将混合为一个数组，因此都将被调用。另外，混入对象的钩子将在组件自身钩子之前调用。
 *  值为对象的选项（methods, components 和 directives）将被混合为同一个对象。两个对象键名冲突时，取组件对象的键值对。

需要注意的是

> 谨慎使用全局混入对象，因为会影响到每个单独创建的 Vue 实例 (包括第三方模板)。大多数情况下，只应当应用于自定义选项。也可以将其用作 [Plugins][] 以避免产生重复应用

所以Vue对mixin 设定了 **自定义选项合并策略**

> 自定义选项将使用默认策略，即简单地覆盖已有值。如果想让自定义选项以自定义逻辑合并，可以向 `Vue.config.optionMergeStrategies` 添加一个函数：

Vue.config.optionMergeStrategies.myOption = function (toVal, fromVal) {
      // 返回合并后的值
    }

对于多数值为对象的选项，可以使用与 `methods` 相同的合并策略：

var strategies = Vue.config.optionMergeStrategies
    strategies.myOption = strategies.methods

有时间的，可以看看这篇文件对mixin源码的观察

[从源码看 Vue 中的 Mixin][Vue _ Mixin]

[Plugins]: https://links.jianshu.com/go?to=https%3A%2F%2Fcn.vuejs.org%2Fv2%2Fguide%2Fplugins.html
[Vue _ Mixin]: https://www.cnblogs.com/DM428/p/10889466.html