Vue是一款非常流行的前端JavaScript框架，它提供了許多方便的功能來創建動態交互式用戶界面。其中，key屬性是Vue中非常重要的一個屬性，可以幫助Vue更好地渲染組件和提高渲染的性能。

在Vue中，每個組件都有一個唯一的標識符，稱為key。當Vue進行組件渲染時，它會使用這些key來判斷哪些組件需要被更新、建立、重用或銷毀。而key的唯一性則保證了組件之間的狀態不會相互干擾，從而提高性能。

Vue.component('my-component', {
props: ['info'],
template: '<div>{{ info.text }}</div>',
created() {
console.log('Component created.')
},
mounted() {
console.log('Component mounted.')
},
destroyed() {
console.log('Component destroyed.')
}
})
Vue.component('my-wrapper', {
data() {
return {
infos: [
{ id: 1, text: 'First component' },
{ id: 2, text: 'Second component' },
{ id: 3, text: 'Third component' }
]
}
},
methods: {
shuffle() {
this.infos = this.infos.reverse()
}
},
template: '<div>'
+ '  <button @click="shuffle">Shuffle</button>'
+ '  <my-component v-for="info in infos" :key="info.id" :info="info" />'
+ '</div>'
})
new Vue({
el: '#app'
})

如上面的代碼所示，我們有兩個組件：my-component和my-wrapper，my-wrapper是一個包裝組件，用來展示多個my-component組件，并且可以隨機改變它們的順序。

我們在my-component組件中添加了created、mounted和destroyed這三個生命周期函數，用來測試組件的創建、掛載和銷毀過程。

在my-wrapper組件中，我們使用了v-for循環遍歷infos數組，并且使用:key綁定了每個info的id作為其唯一標識。這樣，當我們點擊Shuffle按鈕時，Vue就會根據key的唯一性來決定哪些組件需要被創建、更新、重用或銷毀。