Diff 算法的误判

news2024/11/16 19:24:03

起源：

设想一下，假如你桌面上的文件都没有文件名，取而代之的是，你使用通过文件的位置顺序即index来区分它们———第一个文件，第二个文件，以此类推。也许这种方式可行，可是一旦你删除了其中的一个文件，这种组织方式就会变得混乱无比。原来的第二个文件可能会变成第一个文件，第三个文件会成为第二个文件……引出我们的主角问题：for循环的:key的值使用index绑定，当循环列表条目变化更新，导致虚拟 DOM Diff 算法认为原有项被替换，而不是更新。

// vue2写法 错误例子
<template>
  <div>
    <button @click="addItem">添加项目</button>
    <button @click="removeItem">删除项目</button>
    <ul>
      <li v-for="(item, index) in list" :key="index">
        {{ item.name }} (index: {{ index }})
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: [
        { name: 'Item 1' },
        { name: 'Item 2' },
        { name: 'Item 3' }
      ]
    };
  },
  methods: {
    addItem() {
      this.list.splice(1, 0, { name: `New Item` }); // 在索引1的位置插入一个新项
    },
    removeItem() {
      this.list.splice(0, 1); // 删除索引0位置的项
    }
  }
};
</script>

// vue3 错误例子
<template>
  <div>
    <button @click="addItem">添加项目</button>
    <button @click="removeItem">删除项目</button>
    <ul>
      <li v-for="(item, index) in list" :key="index">
        {{ item.name }} (index: {{ index }})
      </li>
    </ul>
  </div>
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {
    // 定义列表为响应式数据
    const list = ref([
      { name: 'Item 1' },
      { name: 'Item 2' },
      { name: 'Item 3' }
    ]);

    // 添加项目方法
    const addItem = () => {
      list.value.splice(1, 0, { name: 'New Item' }); // 在索引1的位置插入一个新项
    };

    // 删除项目方法
    const removeItem = () => {
      list.value.splice(0, 1); // 删除索引0位置的项
    };

    return {
      list,
      addItem,
      removeItem
    };
  }
};
</script>

解决方法：

不要使用 index 作为 key，而是使用数据中的唯一标识符或者随机数，这样可以避免 Diff 算法的误判，确保列表在更新时能够正确地追踪每个项的状态，提升渲染性能。

//vue2写法
<template>
  <div>
    <button @click="addItem">添加项目</button>
    <button @click="removeItem">删除项目</button>
    <ul>
      <li v-for="item in list" :key="item.id">
        {{ item.name }} (id: {{ item.id }})
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: [
        { id: generateRandomId(), name: 'Item 1' },
        { id: generateRandomId(), name: 'Item 2' },
        { id: generateRandomId(), name: 'Item 3' }
      ]
    };
  },
  methods: {
    addItem() {
      // 使用随机 id 添加新项
      this.list.push({ id: generateRandomId(), name: `New Item` });
    },
    removeItem() {
      this.list.splice(0, 1); // 删除索引0位置的项
    }
  }
};

// 生成随机 id 的函数
function generateRandomId() {
  return Math.floor(Math.random() * 1000000); // 生成一个 6 位的随机数
}
</script>

// vue3 写法，正确例子
<template>
  <div>
    <button @click="addItem">添加项目</button>
    <button @click="removeItem">删除项目</button>
    <ul>
      <li v-for="item in list" :key="item.id">
        {{ item.name }} (id: {{ item.id }})
      </li>
    </ul>
  </div>
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {
    // 定义列表为响应式数据
    const list = ref([
      { id: generateRandomId(), name: 'Item 1' },
      { id: generateRandomId(), name: 'Item 2' },
      { id: generateRandomId(), name: 'Item 3' }
    ]);

    // 生成随机 id 的函数
    function generateRandomId() {
      return Math.floor(Math.random() * 1000000); // 生成一个 6 位的随机数
    }

    // 添加项目方法
    const addItem = () => {
      list.value.push({ id: generateRandomId(), name: 'New Item' });
    };

    // 删除项目方法
    const removeItem = () => {
      list.value.splice(0, 1); // 删除索引0位置的项
    };

    return {
      list,
      addItem,
      removeItem
    };
  }
};
</script>