在Vue中使用列表渲染v-for时为什么不要用index作为key?

列表渲染v-for

我们可以使用 v-for 指令基于一个数组来渲染一个列表。v-for 指令的值需要使用 item in items 形式的特殊语法,其中 items 是源数据的数组,而 item 是迭代项的别名,v-for 也支持使用可选的第二个参数表示当前项的位置索引。

data() {
  return {
    items: [{ message: 'Foo' }, { message: 'Bar' }]
  }
}
1、使用v-for遍历数组
  • {{ item.message }} - {{ index }}
  • 2、你可以在定义 v-for 的变量别名时使用解构,和解构函数参数类似:
  • {{ message }} {{ index }}
  • 3、你也可以使用 of 作为分隔符来替代 in,这更接近 JavaScript 的迭代器语法:
  • {{ message }} {{ index }}
  • 4、你也可以使用 v-for 来遍历一个对象的所有属性
    data() {
      return {
        myObject: {
          title: 'How to do lists in Vue',
          author: 'Jane Doe',
          publishedAt: '2016-04-10'
        }
      }
    }
    

    遍历的顺序会基于对该对象调用 Object.keys() 的返回值来决定。
    第二个参数表示属性名 (例如 key):
    第三个参数表示位置索引:

  • {{ index }}. {{ key }}: {{ value }}
  • 5、v-for 可以直接接受一个整数值。在这种用例中,会将该模板基于 1…n 的取值范围重复多次。
    {{ n }}
    6、v-if和v-for的优先级

    同时使用 v-if 和 v-for 是不推荐的,因为这样二者的优先级不明显。

    在vue2中,v-for的优先级高于v-if
    在vue3中,v-if的优先级高于v-for

    在外新包装一层 再在其上使用 v-for 可以解决这个问题 (这也更加明显易读):

    
    
    7、通过 key 管理状态

    Vue 默认按照“就地更新”的策略来更新通过 v-for 渲染的元素列表。当数据项的顺序改变时,Vue 不会随之移动 DOM 元素的顺序,而是就地更新每个元素,确保它们在原本指定的索引位置上渲染。

    为了给 Vue 一个提示,以便它可以跟踪每个节点的标识,从而重用和重新排序现有的元素,你需要为每个元素对应的块提供一个唯一的 key。

    key 这个特殊的属性主要作为 Vue 的虚拟 DOM 算法提示,在比较新旧节点列表时用于识别 vnode。key 绑定的值期望是一个基础类型的值,例如字符串或 number 类型。不要用对象作为 v-for 的 key。

    8、 index 作为 key 是不推荐使用的
    • 性能问题:在 Vue中,使用索引作为 key 会导致 Vue 在跟踪每个项目的身份和数据变化时产生较大的性能开销。因为当列表项发生变化时,Vue 需要重新创建和渲染整个列表,而不是只更新单个元素。
    • 数据一致性问题:如果使用索引作为 key,当数据项发生移动时(例如排序或过滤操作),索引也会发生改变。这可能会导致数据和视图不一致,因为 Vue 无法跟踪这些变化。
    • 影响 Vue 的 diff 算法:Vue 的 diff 算法基于 key 进行。如果使用索引作为 key,当列表发生变化时,Vue 将无法正确地确定哪些元素发生了变化,哪些没有。这可能会导致不必要的渲染和性能问题。

    为了避免这些问题,建议为每个列表项分配一个唯一的、不可变的 key 值。可以是每个项目的唯一标识符(例如数据库 ID),或者是一种可以唯一标识项目的方法(例如将项目添加到一个由字符串组成的字典中,将项目作为字典的键)。

    同一个父元素下的子元素必须具有唯一的 key。重复的 key 将会导致渲染异常。

    你可能感兴趣的:(vue,vue3,vue.js,javascript,前端)