Bindowanie klucza w pętli v-for - vuejs

W jakim celu w tym przykładzie jest bindowany key w dyrektywie v-for? Bez tego klucza zostaną wypisane takie same elementy na outpucie.

<script src="https://unpkg.com/vue/dist/vue.js"></script>

<ul id="example-1">
  <li v-for="item in items" :key="item.message">
    {{ item.message }}
  </li>
</ul>

var example1 = new Vue({
  el: '#example-1',
  data: {
    items: [
      { message: 'Foo' },
      { message: 'Bar' }
    ]
  }
})

https://vuejs.org/v2/api/#key

.__. napisał(a):

https://vuejs.org/v2/api/#key

Z tego co wyczytałem tego klucza używa się w celu tego aby nie wystąpiły żadne błędy, gdy będziemy zamieniać kolejność elementów w liście?

@.__.: dobrze mówię?

Podany klucz musi mieć każdą wartość unikalną (np. id) i wtedy vue będzie efektywniej operować na elementach w pętli. Bez klucza też zadziała, ale będzie do tego stosować własny algorytm, który zapewne jest już wolniejszy.