Prefacio:
Cuando usamos v-for in vue, generalmente necesitamos agregar una clave para indicar su singularidad. Entonces, ¿por qué necesitamos agregar esta clave? Hablemos de ello aquí.
Uso de v-for:
<ul>
<li v-for='(item,index) in arr' :key='"demo"+index'>{
{item}}<li>
</ul>
data里面定义：
arr:[]可以简单的这样理解：加了key(一定要具有唯一性) id的checkbox跟内容进行了一个关联。是我们想达到的效果
He comprobado los documentos pertinentes y la leyenda es muy clara.
El algoritmo Diff del DOM virtual de vue y react es aproximadamente el mismo. Su núcleo se basa en dos suposiciones simples.
Primero , hablemos del método de procesamiento del algoritmo diff. Compare los nodos de la misma capa del árbol dom antes y después de la operación. Imagen:
before.png
Cuando hay muchos nodos idénticos en una capa, es decir, listar nodos, el proceso de actualización del algoritmo Diff también sigue los principios anteriores de forma predeterminada.
Por ejemplo, esta situación:
3297464-ee627869a6714336.jpg
Esperamos que podamos agregar una F entre B y C. El algoritmo Diff se ejecuta por defecto así:
3297464-d912523aac5fd108.jpg
Es decir, actualice C a F, D a C, E a D y finalmente inserte E. ¿Es muy ineficiente?
Entonces, necesitamos usar la clave para hacer una identificación única para cada nodo, el algoritmo Diff puede identificar correctamente este nodo, encontrar el área de ubicación correcta para insertar un nuevo nodo.
3297464-650689b4bd4b9eb6.jpg
El bucle de lista en vue debe agregar: clave = "identificador único" El identificador único puede ser el índice de identificación en el elemento, etc., porque el componente vue se reutiliza mucho y la clave puede identificar la singularidad del componente. para distinguir mejor cada componente, la función clave es principalmente Para actualizar eficientemente el DOM virtual