El papel de :key en vue

La identificación única de elementos DOM puede mejorar la eficiencia del algoritmo de diferencia

El caso anterior reproduce el siguiente proceso

Si no hay una clave, el algoritmo de diferencia se establece de forma predeterminada a:

Es decir, actualice C a F, actualice D a C, actualice E a D y luego inserte E al final. Se actualizó 3 veces y luego se realizó una operación de creación e inserción.

Por lo tanto, debemos usar la clave para darle a cada nodo un identificador único para que el algoritmo Diff pueda identificar correctamente el nodo y encontrar el área de ubicación correcta para insertar. nuevos nodos.

Solo hay una operación de creación de anexos

Usando la clave

Conclusión:

Haga clic en Eliminar en el segundo elemento

La razón es simple, crees que estás eliminando 2, pero Vue pensará que estás haciendo dos cosas:

Tomando prestado un ejemplo de la documentación oficial:

Aquí, si el text Cuando ocurre un cambio, todo el elemento se actualizará, porque cuando el texto cambia, el atributo clave del elemento también cambiará. Al representar la actualización, Vue pensará que se ha creado un nuevo elemento aquí. el elemento antiguo se eliminará porque la clave ya no existe. Y los viejos elementos serán eliminados, desencadenando la transición.

Si no hay un atributo clave:

entonces, cuando el texto cambie, Vue reutilizará el elemento y solo cambiará el contenido del elemento , sin agregar nuevos elementos ni eliminarlos. Elementos antiguos.

De manera similar, cuando se utiliza el atributo clave en un componente, cuando se cambia la clave, se creará un nuevo componente y se eliminará el componente anterior, momento en el cual se activará el enlace del ciclo de vida del componente.