Tabla de contenido
El valor clave identifica de forma única los datos
introducir
Cuando haya utilizado Vue, debe estar muy familiarizado con la directiva v-for. Esta instrucción generalmente se usa para recorrer datos de matriz. Al usar el comando v-for, el atributo clave debe ser inseparable. ¿Entiendes este atributo y qué hace? ¿Cuál es el valor? ¿Cuál es la diferencia? ¡Este artículo presentará la función y el principio de la clave en Vue en detalle!
El papel de la llave
Cuando vincula un atributo clave a una lista, el atributo existirá en el DOM virtual. La clave es el identificador del objeto DOM virtual. Cuando los datos cambien, Vue generará uno nuevo de acuerdo con los nuevos datos modificados por el usuario. DOM virtual. Luego, Vue comparará la diferencia entre el nuevo DOM virtual y el antiguo DOM virtual. El proceso de comparación se puede dividir en dos casos:
Cuando se encuentra la misma clave que el nuevo DOM virtual en el antiguo DOM virtual, si el contenido en el DOM virtual no ha cambiado, ¡el DOM real anterior se usará directamente! Si el contenido del DOM virtual cambia, se genera un DOM real nuevo y luego se reemplaza el DOM real anterior en la página.
Cuando no se encuentra la misma clave que el nuevo DOM virtual en el antiguo DOM virtual, se crea un nuevo DOM real y luego se representa en la página.
¿Está un poco confundido? No se preocupe, ¡habrá ejemplos detallados en los siguientes ejemplos! !
Valor clave
La clave tiene principalmente las siguientes tres situaciones. Ahora tomemos un pequeño caso para usar los siguientes métodos respectivamente para ver cuáles son los efectos específicos y cuáles son las diferencias.
Representamos una lista de personas en la página y agregamos un botón. Cuando se hace clic en el botón, se agregará un nuevo miembro antes de la lista de personas. (¡Por qué debería estar antes de la lista, este es un punto clave!)
No vincular el atributo clave
Cuando no agregamos el atributo clave cuando escribimos v-for, no afectó el efecto que queríamos. El código de implementación correspondiente y el diagrama de efectos son los siguientes:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>key的原理</title>
<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<!-- 准备好一个容器-->
<div id="root">
<h2>人员列表</h2>
<button @click.once="add">添加一个老刘</button>
<ul>
<li v-for="p of persons">
{
{p.name}}-{
{p.age}}
</li>
</ul>
</div>
<script type="text/javascript">
new Vue({
el:'#root',
data:{
persons:[
{id:'001',name:'张三',age:18},
{id:'002',name:'李四',age:19},
{id:'003',name:'王五',age:20}
]
},
methods: {
add(){
const p = {id:'004',name:'老刘',age:40}
this.persons.unshift(p)
}
},
})
</script>
</html>
En este momento, algunos estudiantes pueden preguntarse, ¿se puede mostrar el efecto deseado normalmente sin escribir el atributo clave? Entonces, ¿por qué es tan problemático agregar un atributo clave adicional? De hecho, cuando no agrega el atributo de clave, el sistema establecerá de forma predeterminada el valor del atributo de clave enlazado en index. El índice de la lista, por ejemplo: {id:'001',name:'Zhang San',age:18} el valor del índice es 0, {id:'002',name:'Li Si',age: 19 El valor del índice de } es 1, y así sucesivamente. Para identificar cada etiqueta li.
El valor clave es índice
Cuando agregamos el atributo clave y apuntamos el valor del atributo al índice, el efecto específico que logra es el mismo que el anterior sin agregar el atributo clave. Pero el código de implementación específico es un poco diferente:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>key的原理</title>
<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<!-- 准备好一个容器-->
<div id="root">
<h2>人员列表</h2>
<button @click.once="add">添加一个老刘</button>
<ul>
<!-- 绑定了key属性，并将其值指向于index -->
<li v-for="(p,index) of persons" :key="index">
{
{p.name}}-{
{p.age}}
</li>
</ul>
</div>
<script type="text/javascript">
Vue.config.productionTip = false
new Vue({
el:'#root',
data:{
persons:[
{id:'001',name:'张三',age:18},
{id:'002',name:'李四',age:19},
{id:'003',name:'王五',age:20}
]
},
methods: {
add(){
const p = {id:'004',name:'老刘',age:40}
this.persons.unshift(p)
}
},
})
</script>
</html>La implementación correspondiente es la misma que la anterior y el efecto se puede mostrar correctamente. Este tipo de escritura también es relativamente común. Esto no mostró ningún problema. Pero si agrego un cuadro de entrada después de cada lista ahora, ¿qué sucederá?
<div id="root">
<h2>人员列表</h2>
<button @click.once="add">添加一个老刘</button>
<ul>
<!-- 绑定了key属性，并将其值指向于index -->
<li v-for="(p,index) of persons" :key="index">
{
{p.name}}-{
{p.age}}
<!-- 增加了input输入框 -->
<input type="text">
</li>
</ul>
</div>
De las representaciones anteriores, podemos ver claramente el problema, pero cuando no hay contenido en el cuadro de entrada, no hay problema después de agregarlo. Pero cuando ingresamos el contenido correspondiente en el cuadro de entrada correspondiente antes de agregar, encontraremos que hay un problema después de agregar. Entonces, ¿por qué hay tal problema? Echemos un vistazo a la siguiente demostración gráfica:
Cuando usamos el índice como clave, el DOM virtual se generará de acuerdo con los datos posteriores a los datos iniciales, y los valores clave en las etiquetas li correspondientes son 0, 1 y 2 respectivamente. Después de que los datos generan el DOM virtual inicial, se crea un nuevo DOM real y luego se representa en la página.
Y cuando agreguemos otro dato, se generará un nuevo DOM virtual basado en nuestros nuevos datos. El nuevo DOM virtual se comparará con el original, es decir, el antiguo DOM virtual. Primero encuentre el li correspondiente al mismo valor de clave. Si el contenido en el DOM virtual no ha cambiado, use el DOM real anterior directamente. Si el el contenido en el DOM virtual ha cambiado, se genera un nuevo DOM real y el contenido en key="0" ha cambiado de "Zhang San-18" a "Old Liu-30", y luego el DOM real anterior en la página es remplazado. Y el resultado de la comparación <input type="text"> es el mismo, así que guarde el contenido original. clave="1" y clave="2" y así sucesivamente. Y key="3" no se encuentra en el antiguo DOM virtual, por lo que se crea un nuevo DOM real y luego se representa en la página.
¡Ahora entiendo! !
El valor clave identifica de forma única los datos
Cuando asignamos el valor del atributo clave como identificador único en los datos, ¿qué sucederá? Asignamos el valor de id en personas al atributo clave. El código específico es el siguiente:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>key的原理</title>
<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<!-- 准备好一个容器-->
<div id="root">
<h2>人员列表</h2>
<button @click.once="add">添加一个老刘</button>
<ul>
<!-- 绑定了key属性，并将其值指向于p.id -->
<li v-for="(p,index) of persons" :key="p.id">
{
{p.name}}-{
{p.age}}
<!-- 增加了input输入框 -->
<input type="text">
</li>
</ul>
</div>
<script type="text/javascript">
new Vue({
el:'#root',
data:{
persons:[
{id:'001',name:'张三',age:18},
{id:'002',name:'李四',age:19},
{id:'003',name:'王五',age:20}
]
},
methods: {
add(){
const p = {id:'004',name:'老刘',age:40}
this.persons.unshift(p)
}
},
})
</script>
</html>
Podemos ver claramente que si el valor vinculado a nuestro atributo clave es el identificador único en los datos, podemos obtener el resultado que queremos. El diagrama esquemático correspondiente es el siguiente:
Dado que el valor vinculado en cada etiqueta li es id, cuando se agrega un nuevo miembro, su id correspondiente = "004", el valor clave correspondiente es 004, que no se encuentra en el antiguo DOM virtual, por lo que se agrega a En el DOM real y renderizado en la página. No explicaré mucho sobre los demás, los principios son los mismos.
Resumir
Si usa el índice como clave, debe considerar descargar dos números:
Primero, si los datos se agregan en orden inverso, se eliminan en orden inverso, etc. para destruir el orden , se generarán actualizaciones DOM reales innecesarias. Aunque el efecto de la interfaz está bien, la eficiencia es baja . En segundo lugar, si la estructura también contiene el DOM de la clase de entrada , se producirá una actualización de DOM incorrecta y la interfaz causará problemas.
Entonces, ¿cómo elegimos la clave durante el proceso de desarrollo?
En primer lugar, es mejor utilizar el identificador único de cada dato como clave, como id, número de teléfono móvil, número de identificación, número de estudiante y otros valores únicos. Si no hay operaciones que destruyan el orden de los datos, como agregar en orden inverso o eliminar en orden inverso, solo se usa para mostrar la lista y no hay problema con usar el índice como clave.