vuedraggable 拖拽真实dom和数据不一致 ，用vue3+vuedraggable 怎么解决？

在Vue 3中，可以使用Composition API来解决vuedraggable拖拽真实dom和数据不一致的问题。

你可以在setup()函数中使用ref()和reactive()来定义数据和状态，然后使用vuedraggable的onEnd回调函数来更新数据。

例如：

<template>
  <div>
    <draggable v-model="list" @end="onEnd">
      <div v-for="item in list" :key="item.id">{{ item.name }}</div>
    </draggable>
  </div>
</template>

<script>
import { ref, reactive } from 'vue';
import draggable from 'vuedraggable';

export default {
  components: {
    draggable,
  },
  setup() {
    const list = ref([
      { id: 1, name: 'Item 1' },
      { id: 2, name: 'Item 2' },
      { id: 3, name: 'Item 3' },
    ]);

    const onEnd = (evt) => {
      list.value = evt.to.children.map((child) => {
        return {
          id: child.dataset.id,
          name: child.innerText,
        };
      });
    };

    return {
      list,
      onEnd,
    };
  },
};
</script>

在上面的示例中，我们使用了ref()来定义列表数据，并在onEnd回调函数中使用了vue的响应式能力来更新列表数据。这样可以确保拖拽真实dom和数据保持一致。

同时，我们使用了vuedraggable组件的v-model指令来双向绑定列表数据和拖拽组件。