Vue.js에서 배열 데이터를 기반으로 여러 개의 요소를 반복적으로 렌더링할 때 `v-for` 디렉티브를 어떻게 사용하는지 설명해 주세요. 이때 `key` 속성의 중요성도 함께 언급해 주세요.

Vue.js에서 배열 데이터를 기반으로 여러 요소를 반복 렌더링할 때는 v-for 디렉티브를 사용합니다. 예를 들어 v-for="(item, index) in items" 와 같이 사용하면 items 배열의 각 요소에 대해 반복적으로 템플릿을 렌더링할 수 있습니다. item은 배열의 각 요소, index는 해당 요소의 인덱스를 나타냅니다.

여기서 중요한 것은 key 속성입니다. key는 Vue가 각 노드를 고유하게 식별하는 데 사용되는 속성으로, Vue는 key를 기반으로 DOM 요소를 재사용하고 업데이트할지 결정합니다. 만약 key가 없다면 Vue는 요소를 효율적으로 업데이트하지 못하고 불필요한 DOM 조작이 발생하여 성능 저하를 일으킬 수 있습니다. 따라서 v-for를 사용할 때는 각 요소의 고유한 ID를 key 속성에 할당하여 성능을 최적화하는 것이 중요합니다. 예를 들어 <li v-for="item in items" :key="item.id">{{ item.name }}</li> 와 같이 사용할 수 있습니다.