Vue中的mixin vs extends

1.mixin

注意:Vue 3中仍然支持mixins，但官方推荐使用组合式API(Composition API)作为更好的替代方案。‌‌

1.1 全局混入

混入可以进行全局注册。使用时格外小心！一旦使用全局混入，它将影响每一个之后创建的 Vue 实例。使用恰当时，这可以用来为自定义选项注入处理逻辑。

// 为自定义的选项 'myOption' 注入一个处理器。
Vue.mixin({
  created: function () {
    var myOption = this.$options.myOption
    if (myOption) {
      console.log(myOption)
    }
  }
})

new Vue({
  myOption: 'hello!'
})
// => "hello!"

1.2 局部混入

// 定义一个混入对象
let myMixin = {
  created: function () {
    this.hello()
  },
  methods: {
    hello: function () {
      console.log('hello from mixin!')
    }
  }
}

// 定义一个使用混入对象的组件
let Component = Vue.extend({
  mixins: [myMixin]
})

let component = new Component() // => "hello from mixin!"

1.3 带参数混入

export default function workflowPlateModel(params) {
    const {well_distribution = ""} = params;
    const {plateType = ""} = params;
    return {
        mounted() {
            //打印布局
            console.log(well_distribution)
            //板位类型
            console.log(well_distribution)
        },
    }
}

1.4 选项合并规则

• data
  合并型策略。若组件和mixin中都有某参数，则组件中的参数覆盖mixin中参数；
• 钩子函数和watch
  队列型策略。都会执行,mixin中内容会先执行；
• props 、method、inject、computed
  同名时候,使用组件内的,不使用mixin的。

一句话:组件为大!!!

2.extends

<div id="root">
    <student></student>
</div>
<script type="text/javascript">
    //创建组件
    const student = Vue.extend({
        //无el属性
        template: `
          <div><h2>你好啊！{{ name }}</h2></div>`,
        //data必须是函数式
        data() {
            return {
                name: "张三"
            }
        }
    })

    const vm = new Vue({
        el: '#root',
        components: {
            'student': student
        },
        data: {},
        created() {
           console.log(this)
        },

        mounted() {
        },
        methods: {}
    })

</script>

3.mixin vs extends

这两个很相似,都极大提高了代码复用率。

• mixin
  主要是复用逻辑，如各种钩子，data，props，metheds，模板是不包括界面的。可以这样子说:mixin是组件中的组件,它是提取出组件与组件之中相同的那部分逻辑内容。
• extends
  是重用组件,更像是对组件的派生，以某个组件为模板进行改造，这个模板包含html,css部分。