vue3（五）mixin 和extends

mixin和extends 两者为mvc的controller

通用的成员变量（包括属性和的方法 ）抽象成为一个父类 提供给子类继承 这样可以让子类拥有一些通用超呢高原变量 然而子类页可以重写父类的成员变量 整个编程思想就很面向对象 也就是继承性

mixin
当组件使用mixin对象时，所有mixin对象的选项将被“混入” 进入该组件本身的选项
mixin合并规则 mixins类型是Array 传入一个混合对象的数组
data函数返回的值对象 会以组件自身的数据为优先
钩子函数会被合并到数组中 在合适的时机会被一次调用 并在调用组件自身钩子之前被调用
如果都有methods选项且定义了实现，那么都会生效
如果对象的key相同 则只会去组件对象的键值对

demoMixin.js

export const demoMixin = {
  data() {
    return {
      message: "Hello DemoMixin"
    }
  },
  methods: {
    foo() {
      console.log("demo mixin foo");
    }
  },
  created() {
    console.log("执行了demo mixin created");
  }
}

使用 mixins属性 demoMixin里面的message和foo函数都能用

<template>
  <div>
    <h2>{{message}}</h2>
    <button @click="foo">按钮</button>
  </div>
</template>

<script>
  import { demoMixin } from './mixins/demoMixin';

  export default {
    mixins: [demoMixin],
    data() {
      return {
        title: "Hello World"
      }
    },
    methods: {

    }
  }
</script>

<style scoped>

</style>

extends

extends类型是Object | Function 接收的是对象或者是函数
extends触发的优先级高相对于是队列
push(extend, mixin1, minxin2, 本身的钩子函数)

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

子类再次声明，data中的变量都会被重写，以子类的为准
如果子类不声明，data中的变量将会最后继承的父类为准。
props中属性、methods中的方法和computed的值继承规则一样
注意extends先执行 在执行mixins2 最后执行mixins1

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

注意extends先执行 在执行mixins21 最后执行mixins2

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