feat[ptr]: 以数组作为下标的影响: 数组变化后，相同位置的元素 key 相同，Vue 会认为是同一个元素，直接复用 DOM

但实际上数据已经变了，导致 DOM 和数据错位
特别是表单元素（input、select、textarea），它们的值存储在 DOM 节点上，不是响应式的，复用 DOM 后值就乱了，导致每次删除的都只可能是最后一个

Author: ceilf6

React/sandboxs/src/App.jsx

@@ -7,6 +7,8 @@ import React from 'react';
 // import { FileUpload } from './components';
 import Timer from './test/Timer';
 
+import ListKey from './test/ListKey';
+
 const el = (
     // 写在 组件中间{ }中的 会自动传入到 props.children
     // <CoverButton>
@@ -27,7 +29,8 @@ const el = (
     //     }}
     // />
 
-    <Timer />
+    // <Timer />
+    <ListKey />
 )
 
 

React/sandboxs/src/test/ListKey.jsx

@@ -0,0 +1,80 @@
+import React, { useState } from "react";
+
+export default function ListKey() {
+  // 错误示范：使用 index 作为 key
+  const [badList, setBadList] = useState([
+    { name: "项目 A" },
+    { name: "项目 B" },
+    { name: "项目 C" },
+  ]);
+  const [badCounter, setBadCounter] = useState(4);
+
+  // 正确做法：使用唯一 id 作为 key
+  const [goodList, setGoodList] = useState([
+    { id: 1, name: "项目 A" },
+    { id: 2, name: "项目 B" },
+    { id: 3, name: "项目 C" },
+  ]);
+  const [goodCounter, setGoodCounter] = useState(4);
+
+  // 错误示范的方法
+  const removeBadItem = (index) => {
+    setBadList((prev) => prev.filter((_, i) => i !== index));
+  };
+
+  const addBadItem = () => {
+    setBadList((prev) => [
+      ...prev,
+      { name: `项目 ${String.fromCharCode(64 + badCounter)}` },
+    ]);
+    setBadCounter((prev) => prev + 1);
+  };
+
+  // 正确做法的方法
+  const removeGoodItem = (id) => {
+    setGoodList((prev) => prev.filter((item) => item.id !== id));
+  };
+
+  const addGoodItem = () => {
+    setGoodList((prev) => [
+      ...prev,
+      {
+        id: goodCounter,
+        name: `项目 ${String.fromCharCode(64 + goodCounter)}`,
+      },
+    ]);
+    setGoodCounter((prev) => prev + 1);
+  };
+
+  return (
+    <div>
+      <h2>错误示范：使用 index 作为 key</h2>
+      <div>
+        <ul>
+          {badList.map((item, index) => (
+            <li key={index}>
+              <span>{item.name}</span>
+              <input type="text" placeholder={`输入${item.name}的值`} />
+              <button onClick={() => removeBadItem(index)}>删除</button>
+            </li>
+          ))}
+        </ul>
+        <button onClick={addBadItem}>添加项</button>
+      </div>
+
+      <h2>正确做法：使用唯一 id 作为 key</h2>
+      <div>
+        <ul>
+          {goodList.map((item) => (
+            <li key={item.id}>
+              <span>{item.name}</span>
+              <input type="text" placeholder={`输入${item.name}的值`} />
+              <button onClick={() => removeGoodItem(item.id)}>删除</button>
+            </li>
+          ))}
+        </ul>
+        <button onClick={addGoodItem}>添加项</button>
+      </div>
+    </div>
+  );
+}

Vue2/sandboxs/package.json

@@ -17,7 +17,8 @@
     "test:FetchData": "vue serve ./test/lifecycle/FetchData.vue",
     "test:Loading": "vue serve ./src/components/Loading/test.vue",
     "test:vLoading": "vue serve ./src/directives/loading/test.vue",
-    "test:TreeListMenu": "vue serve ./src/components/TreeListMenu/test.vue"
+    "test:TreeListMenu": "vue serve ./src/components/TreeListMenu/test.vue",
+    "test:ListKey": "vue serve ./test/ListKey.vue"
   },
   "dependencies": {
     "axios": "^1.13.4",

Vue2/sandboxs/test/ListKey.vue

@@ -0,0 +1,74 @@
+<template>
+  <div>
+    <h2>错误示范：使用 index 作为 key</h2>
+    <div>
+      <ul>
+        <li v-for="(item, index) in badList" :key="index">
+          <span>{{ item.name }}</span>
+          <input type="text" :placeholder="`输入${item.name}的值`" />
+          <button @click="removeBadItem(index)">删除</button>
+        </li>
+      </ul>
+      <button @click="addBadItem">添加项</button>
+    </div>
+
+    <h2>正确做法：使用唯一 id 作为 key</h2>
+    <div>
+      <ul>
+        <li v-for="item in goodList" :key="item.id">
+          <span>{{ item.name }}</span>
+          <input type="text" :placeholder="`输入${item.name}的值`" />
+          <button @click="removeGoodItem(item.id)">删除</button>
+        </li>
+      </ul>
+      <button @click="addGoodItem">添加项</button>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      // 错误示范：使用 index 作为 key
+      badList: [{ name: "项目 A" }, { name: "项目 B" }, { name: "项目 C" }],
+      badCounter: 4,
+
+      // 正确做法：使用唯一 id 作为 key
+      goodList: [
+        { id: 1, name: "项目 A" },
+        { id: 2, name: "项目 B" },
+        { id: 3, name: "项目 C" },
+      ],
+      goodCounter: 4,
+    };
+  },
+  methods: {
+    // 错误示范的方法
+    removeBadItem(index) {
+      this.badList.splice(index, 1);
+    },
+    addBadItem() {
+      this.badList.push({
+        name: `项目 ${String.fromCharCode(64 + this.badCounter)}`,
+      });
+      this.badCounter++;
+    },
+
+    // 正确做法的方法
+    removeGoodItem(id) {
+      const index = this.goodList.findIndex((item) => item.id === id);
+      if (index > -1) {
+        this.goodList.splice(index, 1);
+      }
+    },
+    addGoodItem() {
+      this.goodList.push({
+        id: this.goodCounter, // 直接往后加就好
+        name: `项目 ${String.fromCharCode(64 + this.goodCounter)}`,
+      });
+      this.goodCounter++;
+    },
+  },
+};
+</script>