拖拽组件与vue diff原理

2019/2/22 写下文章的时候我依然没有弄清楚。这篇文章我会持续更新。

拖拽组件是自己封装的一个基于vue的拖拽重排序组件，即给一个通过列表渲染的节点，用拖拽组件包裹起来，把用作v-for渲染的源数据用sync修饰符传进去，再加上一些类名，那么这些通过 v-for 渲染的节点就可以进行拖拽（克隆节点插入到body）排序，drag组件内部自动更新数据。

组件代码地址：drag组件

我的一个项目中有好几个地方用到了这个组件，但是有一次在使用的时候发现了一些很奇怪的bug，类似这样

<template>
    <my-drag :data-list.sync="items">
      <p v-for="(item, index) in items"
         class="drag-bar drag-item"
         :key="index">
        这是第{{ index + 1 }}页,内容是 {{ item }}
      </p>
    </my-drag>
</template>

<script>
import MyDrag from './base/my-drag/my-drag.vue';

export default {
  name: 'test',
  data() {
    return {
      items: ['first', 'second', 'third', 'forth'],
    };
  },
  components: {
    MyDrag,
  },
};
</script>

<style scoped lang="stylus" rel="stylesheet/stylus">
  .drag-item
    position relative
</style>

image.png

这个是初始渲染的节点

在我将第二个拖拽到第一个位置的时候，更新如下

image.png

可以看到数据已经正常更新，但是节点内容并没有按照预料中的进行更新，但是观察一下可以发现，index 对应的内容其实是正常的，即 index 为 0 的内容是 second， index 为 1 的内容为 first，但是它并没有按照实际的数据顺序去更新实际节点的顺序，使用 this.$forceUpdate 也是没有用的。

我们这里给定了key值，我想他是不是追踪key值进行更新的，但是我之前用的也是用了key值的，但是可以成功更新。这里很是困惑。

把例子修改一下，去掉key值

<p v-for="(item, index) in items"
         class="drag-bar drag-item"
>
    这是第{{ index + 1 }}页,内容是 {{item }}
</p>

拖拽之后还是有这样的问题

image.png

再尝试自己给定 id 作为 key 值

<template>
    <my-drag :data-list.sync="items">
      <p v-for="(item, index) in items"
         class="drag-bar drag-item"
         :key="item.id"
      >
        这是第{{ index + 1 }}页,内容是 {{item.text }}
      </p>
    </my-drag>
</template>

<script>
import MyDrag from './base/my-drag/my-drag.vue';

export default {
  name: 'test',
  data() {
    return {
      items: [{ text: 'first', id: 0 }, { text: 'second', id: 1 }, { text: 'third', id: 2 }, { text: 'forth', id: 3 }],
    };
  },
  components: {
    MyDrag,
  },
};
</script>

image.png

这个时候再拖拽就可以得到正确的结果了，尽管key值并没有变化。这里虽然问题解决了，但是很困惑，我想这里应该是涉及到vue内部diff原理的。

后来看到一篇解析vue2.0diff算法文章
不过似乎并没能解决我的问题。
我猜测 vue 对 v-for 渲染的元素，如果数据源本身是简单数据类型，vue 会认为使用简单一些的 diff 以提高效率，只是更新相应节点的 textcontent，当数据源是对象的时候，会使用复杂一些的 diff 原理。
使用复杂数据接口但是依然用 index 做 key

<template>
    <my-drag :data-list.sync="items">
      <p v-for="(item, index) in items"
         class="drag-bar drag-item"
         :key="index"
      >
        这是第{{ index + 1 }}页,内容是 {{item.text }}
      </p>
    </my-drag>
</template>

<script>
import MyDrag from './base/my-drag/my-drag.vue';

export default {
  name: 'test',
  data() {
    return {
      items: [{ text: 'first', id: 0 }, { text: 'second', id: 1 }, { text: 'third', id: 2 }, { text: 'forth', id: 3 }],
    };
  },
  components: {
    MyDrag,
  },
};
</script>

image.png

依然无法按照预期更新

这个应该是跟内部 key 机制有关。

最后编辑于：2019.02.22 12:35:12