Nuxt项目使用Vue Draggable时嵌套图表配置对象数据丢失问题

常见问题根因 #

• Vue Draggable 浅拷贝机制引发的覆盖问题：Vue Draggable 在支持分组拖拽、跨组迁移的场景下，默认的列表更新、拖拽克隆逻辑只做浅拷贝处理。浅拷贝仅复制对象顶层属性，不会复制嵌套的深层对象引用；当拖拽流程触发列表重渲染时，内部临时维护的浅拷贝数据会同步回绑定数据源，最终只保留观测到的几个顶层固定键（legend、scales、elements、responsive、maintainAspectRatio），原本的深层嵌套配置因为引用未被正确复制，被替换成了初始化时的空对象结构。
• 同构渲染流程的对象裁剪问题：如果拿到接口返回的report数据后，没有做深拷贝就直接赋值给Vue响应式变量，Nuxt 在服务端到客户端的脱水、注水流程中，只会保留可枚举、且在响应式初始化阶段被观测到的属性。目前剩余的几个顶层键，刚好是项目之前给图表组件预设的默认配置结构，因此没有被裁剪；而接口返回的自定义深层嵌套配置，因为没有在响应式初始化阶段被提前声明，会被流程自动清空成空对象。
• 图表组件的浅合并逻辑覆盖问题：很多Chart.js封装组件在接收外部传入的chartOptions时，会内部和默认配置做合并。如果合并逻辑用的是顶层展开的浅合并（例如{ ...defaultOptions, ...props.options }），默认配置刚好自带观测到的那几个顶层键结构，外部传入的深层嵌套配置因为没有在浅合并中覆盖到对应嵌套层级，会被默认的空结构覆盖，看起来就像是Draggable把数据弄丢了。

可落地的排查步骤 #

• 先绕开Draggable验证数据源完整性：把原本嵌在Draggable内部的v-for渲染逻辑移到组件外层，直接遍历this.report渲染LineChart组件。如果移到外层后配置显示完整，就将问题范围锁定在Draggable的交互逻辑内；如果移到外层依然出现配置丢失，直接排查响应式初始化、图表组件合并逻辑的问题。
• 检查Draggable的绑定配置：
  • 确认Draggable绑定的数据源和实际渲染用的report是同一份引用，没有在@update、@change这类拖拽回调里意外修改过数组项的嵌套属性
  • 如果开启了group分组支持跨组拖拽，检查有没有自定义clone方法——默认的clone逻辑是浅拷贝，碰到嵌套对象很容易出现引用丢失
  • 确认没有同时给Draggable传list和v-model两个不同步的数据源，避免Draggable内部维护的列表和实际渲染数据出现偏差
• 验证图表组件的参数接收逻辑：不要只在接口获取的位置打印this.report，要在LineChart组件的props入口处直接打印接收到的chartOptions值。如果入参本身就是缺失嵌套属性的，说明是上层传参的问题；如果入参完整但渲染不对，说明是组件内部的合并逻辑出了问题。
• 检查响应式初始化规则：
  • 避免在data中提前给chartOptions预设空的默认结构，否则Vue在初始化响应式时只会观测预设的那几个顶层键，后续接口返回的深层属性不会被纳入响应式追踪，渲染时会直接使用预设的空默认值
  • 接口拿到数据后不要直接赋值给响应式变量，先做全量深拷贝再赋值，避免Nuxt同构流程裁剪深层属性

修复方案 #

• 针对Draggable浅拷贝问题：自定义深拷贝的clone方法，替换组件默认的浅拷贝逻辑：

  methods: {
    cloneDraggableItem(item) {
      return JSON.parse(JSON.stringify(item))
    }
  }
  

  给Draggable组件绑定:clone="cloneDraggableItem"，保证拖拽流程中操作的是完整的深拷贝对象，不会破坏原始数据源的嵌套结构。
• 针对同构渲染裁剪问题：接口返回数据赋值给响应式变量前，先做全量深拷贝，不要依赖Vue响应式系统自动追加深层属性，减少同构流程的裁剪影响。
• 针对图表组件合并问题：把浅合并逻辑替换为深合并逻辑，保证外部传入的chartOptions的深层嵌套属性，可以完整覆盖默认配置的对应结构，不会被空默认值覆盖。

内容的提问来源于stack exchange，提问作者Ryan H