Summary  
This chapter explains how to use Vue’s v-for directive to iterate over arrays or objects in order to dynamically render list items, and how assigning a unique key to each item ensures efficient updates when the data changes.

General domain of usage  
Dynamic user interface rendering in web applications


Vue allows you to render lists of data using the `v-for` directive. This helps display multiple items based on an array.

```vue
<script setup>
import { ref } from "vue";

const items = ref(["Apple", "Banana", "Orange"]);
</script>

<template>
  <ul>
    <li v-for="item in items">{{ item }}</li>
  </ul>
</template>
```

The `v-for` directive loops through each item in the array and renders an element for each one.

It is recommended to add a unique `key` for each item.

```vue
<template>
  <ul>
    <li v-for="item in items" :key="item">{{ item }}</li>
  </ul>
</template>
```

The `:key` helps Vue efficiently update the list when data changes.

Example with objects:

```vue 
<script setup>
import { ref } from "vue";

const users = ref([
  { id: 1, name: "John" },
  { id: 2, name: "Emily" }
]);
</script>

<template>
  <ul>
    <li v-for="user in users" :key="user.id">
      {{ user.name }}
    </li>
  </ul>
</template>
```

Vue updates the list automatically when the data changes.



Why is it important to provide a unique `key` when rendering lists with `v-for` in Vue?

Learn how to build dynamic interfaces using Vue.js and modern JavaScript patterns. Render data, handle user interactions, structure components, and manage state in a clear and scalable way. Apply core Vue concepts to create a complete application with reactive data, reusable components, and interactive UI.

Rendering Lists (v-for)

Rendering Lists (v-for)