Why (with examples) use :key when rendering lists?

Question

Vue.js

The documentation says the following:

When Vue updates a list of elements controlled by the v-for directive, it defaults to an "update in place" strategy. If the order of the elements of an array or object has changed, Vue will not move the DOM elements, but will simply update each element in place to display the new data at the appropriate index.

You can explain with a real-life example why this is:

<div v-for="item in items" :key="item.id">
  <!— содержимое —>
</div>

Better than just looping without :key="item.id" ?

Answer 1

Not more than a month and a half ago, I answered a similar question.