vue的mixin的原理初步解析

官方文档的介绍：混入 (mixin) 提供了一种非常灵活的方式，来分发 Vue 组件中的可复用功能。一个混入对象可以包含任意组件选项。当组件使用混入对象时，所有混入对象的选项将被“混合”进入该组件本身的选项。

可以认为mixin就是用来抽取公共方法并将这些公共对象存放在一个对象里面，混入分为全局混入和局部混入。本文拿vue3中的全局混入来举例。

例子：

import { createApp } from 'vue'
import App from './App.vue'

const app = createApp(App)
//全局的混入
app.mixin({
    created(){
        console.log("全局的生命周期");

    }
})
app.mount('#app')

使用以上的混入代码后，在每个组件加载时都会触发此处的created生命周期函数，其中生命周期函数的混入规则是把全部的相同生命周期都存入一个数组并依次调用。

滴滴，开始手写！

1.首先看例子中的app调用了mixin方法，该方法接受一个mixin的对象。

Vue.mixin = function (mixin) {
    //合并options对象和mixin对象
    this.options=mergeOptions(this.options,mixin)
};

在mixin中调用mergeOptions方法，该方法整个混入实现的入口函数，将options中的属性与混入对象的属性进行合并，例如生命周期函数，methods,computed等等

2.在mergeOptions中分别遍历options对象和mixin对象，例如对于属性computed调用mergeField方法执行具体的混入策略。

const strats ={//存放混入策略。  如：methods:function(){//methods的混入策略}}
function mergeOptions(parent, child) {
    const options = {};
    for (let k in parent) {
        mergeFiled(k);
    }
    for (let k in child) {
        if (!parent.hasOwnProperty(k)) {
            mergeField(k);
        }
    }
    //依据混入策略，对两个对象进行合并
    function mergeField(k) {
        if (strats[k]) {
            options[k] = strats[k](parent[k], child[k]);
        } else {
            // 默认策略
            options[k] = child[k] ? child[k] : parent[k];
        }
    }
    return options;
}

混入的使用是否会带来代码的可读性变差，带来维护的困难呢。 是否会带来性能的下降呢？