Cuando uso v-for en vue, ¿por qué no puedo usar el índice como clave?
Tanto Vue como React implementan un conjunto de DOM virtuales que nos permiten volver a renderizar la página sin manipular directamente elementos DOM, solo datos. El principio oculto detrás de esto es su eficiente algoritmo Diff.
El algoritmo Diff del DOM virtual en Vue y React es aproximadamente el mismo, y su núcleo se basa en dos suposiciones simples:
Con base en estos dos supuestos, la complejidad de Diff El algoritmo del DOM virtual varía de O (n ^ 3) reducido a O (n).
Explicación simple usando gráficos:
Cuando los datos en la página cambian, el algoritmo Diff solo compara nodos en el mismo nivel:
Si los tipos de nodos son diferente, elimine el nodo anterior directamente y luego cree e inserte un nuevo nodo.
Si los nodos son del mismo tipo, las propiedades del nodo se restablecen, actualizando así el nodo.
Por ejemplo:
Queremos poder añadir una F entre B y C. De forma predeterminada, el algoritmo Diff se ejecuta así:
Es decir, actualizará C a F, actualizará D a C, actualizará E a D y finalmente insertará E. Esto es eficiente. Muy bajo y el rendimiento no es lo suficientemente bueno.
Sin embargo, si utiliza una clave para identificar de forma única cada nodo, entonces el algoritmo Diff puede identificar correctamente el nodo y encontrar la ubicación correcta para insertar el nuevo nodo.
En resumen, la función principal de las claves es actualizar eficazmente el DOM virtual. En vue, el atributo clave también se usa al convertir elementos con el mismo nombre de etiqueta. El propósito es permitir que vue distinga estos elementos; de lo contrario, vue solo reemplazará sus propiedades internas sin activar el efecto de conversión.
Aquí, también recomendamos proporcionar un atributo clave al usar v-for siempre que sea posible, a menos que atravesar el contenido DOM de salida sea muy simple.
Por ejemplo:
En este punto, eliminar "Persona4" funciona bien, pero si elimino "Persona2" hay un problema.
Antes de eliminar
Si se selecciona el elemento de la lista y se selecciona Persona3, se eliminará Persona2. Si se utiliza el índice como clave, se seleccionará Persona4, lo que genera. un error.
Si utilizamos una identificación única como clave, después de eliminar Persona2, los elementos restantes no se volverán a representar porque su relación con la clave no ha cambiado, lo que mejora el rendimiento. En este punto, los elementos de la lista se utilizan como opciones de selección y no se produce el error anterior.
El motivo del error es la estrategia de "reutilización in situ"
La explicación oficial de la reutilización in situ es:
Esto es un poco difícil para comprenderlo, consulte el siguiente ejemplo:
Primero, el cuadro de entrada, el texto y el botón están escritos en un div
En la estrategia de reutilización in situ, cuando hace clic en el botón , el cuadro de entrada no vendrá con el texto moviéndose hacia abajo, ya que el cuadro de entrada no está vinculado a los datos, vuejs utiliza de forma predeterminada el dom renderizado y el texto está vinculado a los datos, por lo que el texto se volverá a representar. Esta es la estrategia de representación de listas predeterminada en vue o angularjs porque es muy eficiente.
En un escenario de aplicación de "presentación de listas", esta "reutilización in situ" generalmente no es un problema, por lo que mis sugerencias son las siguientes: Si tiene un escenario de interacción del usuario (como formularios, reordenamiento, etc. ) elementos de la lista, establezca el argumento clave de la directiva v-for para que apunte a un valor único para cada elemento de la lista.
Explicación oficial:
Referencia:
/question/61078310