vue中Mixin和extends详解

一、认识Mixin

目前我们使用组件化开发方式来开发应用程序，但是在不同组件之间存在一些相同的代码逻辑，此时我们希望对相同的代码逻辑
进行抽取。
在vue2和vue3中都支持使用Mixin来解决，Mixin提供了一种非常灵活的方式，来分发Vue组件中的可复用功能，一个Mixin对
象可以包含任何组件选项，当组件使用Mixin对象时，所有Mixin对象的选项将被 混合 进入该组件本身的选项中。

二、Mixin的基本使用

如图所示，上述代码中设定了两个mixin,并且将其全部在App.vue选项中进行配置。

三、mixin的合并规则

1、如果是data中返回的对象的属性相同，则会以该组件的值为准。
2、如果为生命周期钩子函数，则都会被调用。
3、像methods,components和directive这些对象，将会合并成一个对象，如果在key不一样的情况下，都会执行，但是当key一样的时候，只会执行当前组件中的内容。

四、全局混入Mixin

五、extends

extends类似于mixin,相当于继承,但是只是继承options Api中的内容，不继承template模板。

 其实两个都可以理解为继承，mixins接收对象数组（可理解为多继承），extends接收的是对象或函数（可理解为单继承）。

继承钩子函数

扫描二维码关注公众号，回复： 14750381 查看本文章

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

调用方式: mixins: [mixin1, mixin2]

是对父组件的扩充，包括methods、components、directive等。。。

触发钩子函数时，先调用mixins的函数，再调用父组件的函数。

虽然也能在创建mixin时添加data、template属性，但当父组件也拥有此属性时以父为准

data、methods内函数、components和directives等键值对格式的对象均以父组件/实例为准

extends

调用方式: extends: CompA

同样是对父组件的扩充，与mixins类似，但优先级均次于父组件