Vue key属性

前端

梗概:

• 加key的目的是为diff算法添加标识
• 有相同父元素的子元素必须有唯一的 key。重复的 key 会造成渲染错误。

注意:

• 不推荐使用数组下标作为key, 因为数组的增删改查会改变数组下标，导致key重复

实例:

const app = Vue.createApp({
  data() {
    return {
      newTodoText: '',
      todos: [
        {
          id: 1,
          title: 'Do the dishes'
        },
        {
          id: 2,
          title: 'Take out the trash'
        },
        {
          id: 3,
          title: 'Mow the lawn'
        }
      ],
      nextTodoId: 4
    }
  },
})
 
app.component('todo-item', {
  template: `
    <li>
      {{ title }}
    </li>
  `,
  props: ['title'],
})
 
app.mount('#todo-list-example')

<div id="todo-list-example">
  <ul>
    <todo-item
      v-for="(todo, index) in todos"
      :key="todo.id"
      :title="todo.title"
    ></todo-item>
  </ul>
</div>

1. 效果:

• Do the dishes
• Take out the trash
• Mow the lawn

实际应用

遍历二维数组

• vue for 命令遍历二维数组时怎么确定key
  • 如果每个一维数组中都有唯一的id元素，则用改id作为key
    • 实例：v-for="(arr) in list" :key="arr[0].id"
  • 实在不行，改造原数据，把内部的数组与id封装成一个对象装入外层数组中