Given this link
I am learning how to force render a component via key-changing technique
.
The article mentioned the link above states that there is a difference between binding to a key-changing technique using :key=index
and :key=person.id
"
i created the below posted example to experiment the difference.
At run time when i click handlerClickComp1
or handlerClickComp2
i see no difference, and for each click on these handlers only onBeforeUpdate
and onUpdated
are called.
Would you please point out the difference between the two approaches.
Code:
<template>
<img alt="Vue logo" src="./assets/logo.png">
<HelloWorld msg="Welcome to Your Vue.js App"/>
<button @click="handleClickComp1">del element</button>
<button @click="handleClickComp2">del element2</button>
<ul>
<li v-for="(person, index) in people" :key="index">
{{ person.name }} - {{ index }}
</li>
<br/>
<li v-for="(person, index) in people2" :key="person.id">
{{ person.name }} - {{ index }}
</li>
</ul>
</template>
<script>
import HelloWorld from './components/HelloWorld.vue'
export default {
name: 'App',
components: {
HelloWorld
}
}
</script>
<script setup>
import { onBeforeMount,onMounted,onUpdated,onBeforeUpdate,onActivated,onDeactivated,onBeforeUnmount,onUnmounted,ref } from 'vue'
const people = ref([])
people.value.push({ name: 'Evan', age: 34 });
people.value.push({ name: 'Sarah', age: 98 });
people.value.push({ name: 'James', age: 45 });
people.value.push({ name: 'jack', age: 55 });
people.value.push({ name: 'johanness', age: 58 });
const people2 = ref([])
people2.value.push({ id:0, name: 'Evan2', age: 34 });
people2.value.push({ id:1, name: 'Sarah2', age: 98 });
people2.value.push({ id:2, name: 'James2', age: 45 });
people2.value.push({ id:3, name: 'jack2', age: 55 });
people2.value.push({ id:4, name: 'johanness2', age: 58 });
const handleClickComp1 = ()=>{
people.value.splice(1,1)
}
const handleClickComp2 = ()=>{
people2.value.splice(1,1)
}