vue mixins和extends的妙用

我就是我 2021-09-19 19:42 262阅读 0赞

转载自：https://juejin.im/post/5a38d222f265da4312810a76

### 写在前面 ###

> vue提供了mixins、extends配置项，最近使用中发现很好用。如有不对请指正，感谢尤大提供高效生产工具。

### 混合mixins和继承extends ###

![1][]

> 看看官方文档怎么写的，其实两个都可以理解为继承，mixins接收对象数组（可理解为多继承），extends接收的是对象或函数（可理解为单继承）。

继承钩子函数

const extend = {
      created () {
        console.log('extends created')
      }
    }
    const mixin1 = {
      created () {
        console.log('mixin1 created')
      }
    }
    const mixin2 = {
      created () {
        console.log('mixin2 created')
      }
    }
    export default {
      extends: extend,
      mixins: [mixin1, mixin2],
      name: 'app',
      created () {
        console.log('created')
      }
    }
    复制代码

控制台输出

extends created
    mixin1 created
    mixin2 created
    created
    复制代码

*  结论: 优先调用mixins和extends继承的父类，extends触发的优先级更高，相对于是队列
 *  push(extend, mixin1, minxin2, 本身的钩子函数)
 *  经过测试，**watch的值**继承规则一样。

继承methods

const extend = {
      data () {
        return {
          name: 'extend name'
        }
      }
    }
    const mixin1 = {
      data () {
        return {
          name: 'mixin1 name'
        }
      }
    }
    const mixin2 = {
      data () {
        return {
          name: 'mixin2 name'
        }
      }
    }
    // name = 'name'
    export default {
      mixins: [mixin1, mixin2],
      extends: extend,
      name: 'app',
      data () {
        return {
          name: 'name'
        }
      }
    }
    复制代码

// 只写出子类，name = 'mixin2 name'，extends优先级高会被mixins覆盖
    export default {
      mixins: [mixin1, mixin2],
      extends: extend,
      name: 'app'
    }
    复制代码

// 只写出子类，name = 'mixin1 name'，mixins后面继承会覆盖前面的
    export default {
      mixins: [mixin2, mixin1],
      extends: extend,
      name: 'app'
    }
    复制代码

*  结论：子类再次声明，data中的变量都会被重写，以子类的为准。
 *  如果子类不声明，data中的变量将会最后继承的父类为准。
 *  经过测试，**props中属性**、**methods中的方法**和**computed的值**继承规则一样。

### 写在后面 ###

> 关于mixins和extend你可以理解为mvc的c(controller)，这一层。可见通用的成员变量（包括属性和方法）抽象成为一个父类，提供给子类继承，这样可以让子类拥有一些通用成员变量，然而子类也可以重写父类的成员变量。这样的整个编程思想就很面向对象，也就是继承性。

*  extends用来继承现成组件也非常的常用。可参考之前写过一篇：[《基于element-ui实现table可配置化》][element-ui_table]，扩展element-ui的el-table-column组件。

[1]: /images/20210812/858ebd1b8fc147cf9184a0cb5d1fd718.png
[element-ui_table]: https://juejin.im/post/5a2f73a3f265da432718320c