mergeOptions 这可是vue中常用的合并对象方法

最新推荐文章于 2024-10-08 10:22:24 发布

vues

最新推荐文章于 2024-10-08 10:22:24 发布

阅读量1.2k

点赞数 2

分类专栏： promise vue js 文章标签： html5 javascript firefox json

本文链接：https://blog.csdn.net/hbwang_716/article/details/119742494

版权

js 同时被 3 个专栏收录

63 篇文章 0 订阅

订阅专栏

vue

52 篇文章 3 订阅

订阅专栏

promise

10 篇文章 1 订阅

订阅专栏

本文介绍了在Vue中如何使用`mergeHook`函数合并对象，特别关注生命周期钩子的合并，并展示了如何通过`mergeOptions`函数处理不同策略。通过实例，读者可以理解如何在创建、更新等Vue生命周期阶段灵活合并配置。

摘要由CSDN通过智能技术生成

Vue中常用合并对象的方法

vue的生命周期的合并

let lifeCycleHooks=[
    'beforeCreate',
    'created',
    'beforeMount',
    'mounted',
    'beforeUpdate',
    'updated',
    'beforeDestory',
    'destoryed'
]
let strats={};
// 存放着各种策略

function mergeHook(parentVal,childVal) {
    if(childVal){
        if(parentVal){
            return parentVal.concat(childVal);
            // concat
        }else{
            return [childVal]
        }
    }else{
        return parentVal;
    }
}

lifeCycleHooks.forEach(hook=>{
    strats[hook]=mergeHook
})


function isObject(val){
    return typeof val=='object' && val !==null;
}
function mergeOptions(parent,child){
    const options={};
    for(let key in parent){
        mergeField(key);
    }
    function mergeField(key){
        let parentVal=parent[key];
        let childVal=child[key];
        // 如果有对应的策略 就调用对应的策略即可
        if(strats[key]){
            options=strats[key](parentVal,childVal)
        }else{
            if(isObject(parentVal) && isObject(childVal)){
                options[key]={...parentVal,...childVal}
            }else{
                options[key]=child[key];
            }
        }
       
    }

    return options;
}
//console.log(mergeOptions({a:1,data:{a:1}},{data:{b:2},a:100}));

console.log(mergeOptions({beforeCreate:[()=>{}]},{beforeCreate(){}} ));