vue中mixins和extends的妙用

2019-05-25128次阅读vue

mixins、extends这两个都可以理解为继承,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),这一层。可见通用的成员变量(包括属性和方法)抽象成为一个父类,提供给子类继承,这样可以让子类拥有一些通用成员变量,然而子类也可以重写父类的成员变量。这样的整个编程思想就很面向对象,也就是继承性。

直白点说就是当项目中多个组件中可能用到相同的钩子函数、methods方法等等,可以考虑写一个父类通过extends继承下来。

上一篇: vue中的ES7的async异步函数  下一篇: webpack中的JSON.stringify('production')从何而来  

vue中mixins和extends的妙用相关文章