探究vue中extends和mixins的使用

混合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

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

下面单独介绍下mixins、extends、extend

mixins

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

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

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

虽然也能在创建mixin时添加data、template属性，但当父组件也拥有此属性时以父为准，从这一点也能看出制作者的用心（扩充）。

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

extends

调用方式: extends: CompA

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

extend

扩展组件的构造器

当我们调用vue.component('a', {...})时自动调用

值得注意的是extend内的data为一个函数