normalizedList.flatMap 不是 Vue 可拖动的函数

在 Vue 中，我们通常使用 vuedraggable 或 sortablejs 等插件来实现拖拽功能。然而，有时候我们使用了一些不受 Vue 支持的函数，例如 Array.prototype.flatMap，这可能会导致一些无法预知的行为。

什么是 Array.prototype.flatMap？

Array.prototype.flatMap 是 ECMAScript 2019 中新增的数组方法之一，它可以将数组中的每个元素通过指定函数转换成新的数组，最终把所有新数组拼接成一个大数组。

举个例子：

const arr = [1, 2, 3];

const flatArr = arr.flatMap(item => [item, item * 2]);

console.log(flatArr); // [1, 2, 2, 4, 3, 6]

为什么 Array.prototype.flatMap 不适用于 Vue 可拖动？

vuedraggable 和 sortablejs 等插件的实现方式是基于 Vue 的响应式系统的，也就是说，只有响应式数据的变化才会触发更新。但是 Array.prototype.flatMap 并不是响应式的，在使用这个方法的时候，Vue 并不知道数据发生了变化，因此也就无法正确地更新。

如何解决问题？

如果你确实需要使用 Array.prototype.flatMap，可以考虑将它转成 Vue 的响应式数据，例如使用 Vue.observable 或 Vue.set 等方法。

举个例子：

const normalizedList = Vue.observable([
  { id: 1, name: 'Foo', subItems: [{ id: 2, name: 'Bar' }] },
  { id: 3, name: 'Baz', subItems: [] }
]);

const flatList = [];

normalizedList.forEach(item => {
  flatList.push(item);

  item.subItems.forEach(subItem => {
    subItem.parentId = item.id;
    flatList.push(subItem);
  });
});

const draggableList = flatList.flatMap(item => ({
  ...item,
  subItems: item.subItems.map(subItem => subItem.id)
}));

console.log(draggableList);

// Output:
// [
//   { id: 1, name: 'Foo', subItems: [2] },
//   { id: 2, name: 'Bar', parentId: 1, subItems: [] },
//   { id: 3, name: 'Baz', subItems: [] }
// ]

在上面的例子中，我们将 normalizedList 转成了 Vue 的响应式数据，然后手动把所有子项插入到数组中，最后再通过 flatMap 转换成了可拖动的数据格式。

总结

虽然 Array.prototype.flatMap 是一个很方便的数组方法，但是在 Vue 中使用时需要有所注意。如果出现了类似的问题，可以尝试使用 Vue 的响应式数据来解决。