vue mixins和extends的通俗解说


混合mixins和继承extends

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

继承钩子函数

1
2
3
4
5
6
7
8
9
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')  }
}

控制台输出

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

继承methods

1
2
3
4
5
6
7
8
9
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'    }  }
}

1
2
// 只写出子类，name = 'mixin2 name'，extends优先级高会被mixins覆盖
export default {  mixins: [mixin1, mixin2],  extends: extend,  name: 'app'}
1
2
// 只写出子类，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的el-table-column组件。

附：vue中extend、mixins、extends的三者区别：

extend

extend使用基础 Vue 构造器，创建一个“子类”。参数是一个包含组件对象。类似于类中的继承概念

mixins

可以混入多个，当组件使用混入对象时，所有混入对象的选项将被“混合”进入该组件本身的选项。当组件和混入对象含有同名选项时，这些选项将以恰当的方式进行“合并”。数据对象在内部会进行递归合并，并在发生冲突时以组件数据优先。
同名钩子函数将合并为一个数组，因此都将被调用。另外，混入对象的钩子将在组件自身钩子之前调用。

extends

声明扩展另一个组件(可以是一个简单的选项对象或构造函数)无需使用 Vue.extend。这主要是为了便于扩展单文件组件。和 mixins 类似。但extends只能继承一个