列表渲染中的key

在Vue的列表渲染中，绑定组件的key属性来唯一的标识渲染列表的元素

在学到Vue的Key的作用时候，不是特别清楚它的具体功能和作用，查找了几篇博客和视频后，有一点自己的理解

没有Key的渲染

在Vue3的文档中有一段话

当 Vue 正在更新使用 v-for 渲染的元素列表时，它默认使用“就地更新”的策略。如果数据项的顺序被改变，Vue 将不会移动 DOM 元素来匹配数据项的顺序，而是就地更新每个元素，并且确保它们在每个索引位置正确渲染。

结合这段话，我们来看下面的例子，可以点击尝试

首先我们将每个元素的输入框区分一下，点击第二个delete也就是删除第二个元素

可以发现结果并不是预期的，为什么前面的文本变成第三个元素的文本但是随后的表单却没有变呢？

结合上面提到的文档中的内容

它默认使用“就地更新”的策略。如果数据项的顺序被改变，Vue 将不会移动 DOM 元素来匹配数据项的顺序，而是就地更新每个元素

个人认为这个列表的每一项可以分为两部分，一部分是前面的文本叫做p，后一部分表单为f，如第二个元素

No.2: {
    p:{"id": 2, "value": 2}
    f:input:text
}

当删除第二个元素时，因为此时Vue不知道如何来唯一的确定每个元素，所以只能从头开始遍历一个个替换，新列表和旧列表的信息如下所示

{
    OldList: 
    {
        No.1: {
            p:{"id": 1, "value": 1}
            f:input: text
    	}
    	No.2: {
            p:{"id": 2, "value": 2}
            f:input: text
    	}
    	No.3: {
            p:{"id": 3, "value": 3}
            f:input: text
    	}
    }
	NewList: 
    {
        No.1: {
            p:{"id": 1, "value": 1}
            f:input: text
    	}
    	No.3: {
            p:{"id": 3, "value": 3}
            f:input: text
    	}
    }
}