vue的extend extends mixins

一. 描述

extend 组件构造器，便于复用
extends 实现继承组件
mixins 对组件的扩充,可多个

1.1 extend

Vue.extend(option)
使用基础 Vue 构造器，创建一个“子类”。参数是一个包含组件选项的对象。
通过new关键字创建组件实例

let testComponent = Vue.extend({
    template:`
    <div>{{test}}</div>
    `
    data(){
        test:"hello world"
    }
})
let newConponet1 = new testComponent().$mount("#id1")
let newConponet2 = new testComponent().$mount("#id2")

1.2 extends

在没有使用extend的时候,实现继承
let componentA = {
    ...
}
let componentB = {
    extends: componentA
}

1.3 mixins

允许混入多个组件，如果全局混入会影响所有的组件，所有一般定义个性化组件时才使用。
Vue.mixins(option)

const mixin = {
  created() {
    console.log(1)
  }
}

createApp({
  created() {
    console.log(2)
  },
  mixins: [mixin]
})

// => 1
// => 2

二. 合并规则

当组件和混入对象含有同名选项时，这些选项将以恰当的方式进行“合并”。数据对象在内部会进行递归合并，在有同名的keys时以组件数据优先。

2.1 钩子函数将混合为一个数组，混入对象的钩子将在组件自身钩子之前调用

2.2 值为对象的选项，例如 methods, components 和 directives，将被混合为同一个对象。两个对象键名冲突时，取组件对象的键值对。

2.3 watch和组件自身的watch会合并在一个数据中，混入中的组件中的watch会先运行，而后再是组件自己的watch

2.4.优先级 extends > mixins 存在多个钩子函数时，先运行优先级高的。

<template>
    <div>
        <div>name:{{name}}</div>
        <div>hello:{{hello}}</div>
        <div>world:{{world}}</div>
        <button @click="clickFunction">点击</button>
    </div>
</template>
<script lang="ts">
import Vue from 'vue'
let componesA = Vue.extend({
        created(){
        console.log('created-extend')
    },
    data(){
        return {
            name:"extend",
            hello:'hello'
        }
    },
    methods:{
        clickFunction(){
            console.log('click-extend')
        }
    },
    watch:{
        name(newV,oldV){
            console.log('watch-extend')
        }
    }
})
let mixins = {
    created(){
        console.log('created-mixins')
    },
    data(){
        return {
            name:"mixins",
            hello:'hello'
        }
    },
    methods:{
        clickFunction(){
            console.log('click-mixins')
        }
    },
    watch:{
        name(newV,oldV){
            console.log('watch-mixins')
        }
    }
}
export default {
    mixins:[mixins],
    extends:componesA,
    created(){
        console.log('created-self')
    },
    data(){
        return {
            name:"self",
            world:"world"
        }
    },
    methods:{
        clickFunction(){
            console.log('click-self')
            this.name = '9527'
        }
    },
    watch:{
        name(newV,oldV){
            console.log('watch-self')
        }
    }
}
</script>

运行结果：
created-extend
created-mixins
created-self
click-self
watch-extend
watch-mixins
watch-self

三. 总结

extend 创建组件的构造函数,为了建立可复用的组件。
mixins和extends是为了扩展组件。
调用的时候以一定的规则方式进行“合并”，其中生命周期钩子与watch会合并为一个数组，并且会按(extends > mixins)优先级的顺序执行。