Vue3 + Draggable嵌套拖拽列表响应式双向生效问题求助

问题根源拆解 #

你碰到的两种赋值方式的问题，本质都是响应式数据更新的引用处理错误：

• list.value = newList：将子项移到主列表时，watcher触发时newList还是旧数据，这是因为嵌套组件的props传的是引用，父级列表更新时，子组件的watcher捕获的是更新前的引用快照，加上Draggable的回调时机差，导致数据不同步。
• list.value = Object.assign(newList, list.value)：这写法逻辑完全反了——Object.assign是把第二个参数的属性合并到第一个参数里，等于用旧的list.value覆盖了新的newList，所以子项移入时只有界面变了，实际数据根本没更新。

靠谱解决方案 #

1. 修正数据赋值逻辑 #

直接抛弃错误的Object.assign用法，每次更新都创建新的数组引用（触发Vue响应式更新），嵌套结构要做深拷贝：

// 深拷贝创建新数组，彻底切断旧引用
list.value = JSON.parse(JSON.stringify(newList))

// 或者手动递归深拷贝（避免JSON.parse的局限性）
const deepClone = (arr) => {
  return arr.map(item => ({
    ...item,
    children: item.children ? deepClone(item.children) : []
  }))
}
list.value = deepClone(newList)

2. 拖拽结束时强制同步父ID #

因为要提交父ID到后端，拖拽完成时必须手动维护父子列表的关联：

• 子项移到主列表：把该项的parentId设为null（或主列表的标识值），同时从原父项的children里移除它。
• 主项移到子列表：把该项的parentId设为目标父项的ID，同时添加到目标父项的children数组中。

3. 优化Watcher配置 #

开启深度监听，确保嵌套结构变化能被捕获，同时加immediate保证初始化时触发：

watch(list, (newList) => {
  // 筛选出修改过的项（可以在拖拽时给项加_dirty标记）
  const changedItems = newList.filter(item => item._dirty)
  if (changedItems.length) {
    // 只提交必要的id和parentId，减少请求体积
    axios.post('/api/update-nested-list', changedItems.map(({id, parentId}) => ({id, parentId})))
  }
}, { deep: true, immediate: true })

4. 切断父子组件的引用传递 #

父组件给子组件传子列表时，要创建新引用，避免因为引用共享导致的更新混乱：

<!-- 父组件传递子列表时，生成新数组 -->
<NestedList :list="item.children ? [...item.children] : []" :parent-id="item.id" />

避坑提醒 #

• 别再用Object.assign(newList, list.value)这种反向赋值，就算要合并也得写Object.assign({}, list.value, newList)，但数组结构直接创建新数组更稳妥。
• 嵌套拖拽必须同时维护父级和子级列表的双向同步，不能只改一边数据。
• 提交后端时，只传修改过的项，别全量提交整个列表。

内容的提问来源于stack exchange，提问作者Damian Chudobiński