Uso vuejs para representar una lista y darle a cada elemento la clave correcta. Normalmente, elimino el primer elemento de la matriz y todos los subelementos de la lista no se actualizarán.

Pero descubrí que al agregar v-bind="$attrs" a los subelementos, cuando elimino cualquier elemento, ¡todos los subelementos se actualizarán!

Código normal:

 new Vue({ el: "#app", components: { Item: { props: { item: Number }, template: `<input :placeholder="item"></input>`, beforeUpdate() { console.log('Item beforeUpdate') }, updated() { console.log('Item updated') } } }, data() { return { list: [1, 2, 3] }; }, template: ` <div> <button @click="list.splice(0, 1)">splice first</button> <item v-for="item in list" :key="item" :item="item" /> </div> ` });

Cuando se ejecuta el código anterior, hago clic en el botón, no imprimirá nada. Explique que el componente de subelementos no está actualizado.

Cuando modifico la plantilla del componente como:

<input :placeholder="item" v-bind="$attrs"></input>

y haga clic en el botón, imprimirá 'Elemento antes de actualizar' y 'Elemento actualizado', ¡esto es incorrecto en mi cognición!

Espero que alguien que sepa de esto me pueda ayudar, gracias!