前端开发之deepmerge的使用和示例（对象的深度合并）-CSDN博客

本文链接：https://blog.csdn.net/m0_50207524/article/details/136009293

本文介绍了前端开发中如何使用deepmerge进行深度合并，特别是在前后端数据交互时，避免递归带来的问题，通过Vue3实例展示了如何安装并使用deepmerge以及与Object.assign的浅合并对比。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前端开发之deepmerge的使用和示例

前言
使用场景
链接
效果图
vue中简单案例

前言

在平时的项目中经常会涉及到对象除了第一层以及下层进行深度合并，本问讲解的是深度合并的插件deepmerge，使用此插件避免通过递归实现一些深度合并所带来的问题

使用场景

经常使用到的场景是前后端交互的时候需要传全量的数据这时候就需要把选择的表单和之前后端返回的数据合并整体传回给后端

链接

gitee链接：deepmerge在gitee地址

效果图

在这里插入图片描述

vue中简单案例

1、安装插件

npm install deepmerge

2、示例

本文采用的是通过vue3进行演示

<template>
  <div>
    你好
  </div>
</template>

<script>
import { defineComponent, ref, nextTick } from 'vue'
import merge from 'deepmerge'

export default defineComponent({
  name: 'coPy',
  setup () {
    const deepObj1 = {
      a: {
        a: 'aaaaaaaa'
      },
      b: {
        b: 'bbbbbbb'
      },
      c: {
        c: 'ccccccc'
      }
    }

    const deepObj2 = {
      a: {
        a: 'aaaaaaaaccc'
      },
      b: {
        b: 'bbbbbbb'
      },
      c: {
        a: {
          b: {
            b: 'bbbbbbbbbbb'
          }
        }
      }
    }

    const deepObj3 = merge(deepObj1, deepObj2)

    const deepObj4 = Object.assign(deepObj1, deepObj2)
    console.log('deepObj1', deepObj1)
    console.log('deepObj2', deepObj2)
    console.log('使用deepmerge进行合并', deepObj3)
    console.log('使用object.assign 进行浅合并', deepObj4)

    return {
     
    }
  }
})
</script>
<style lang="less" scoped>
</style>

结果

在这里插入图片描述