zoukankan      html  css  js  c++  java
  • v-for中key属性的作用

     

    key

    当 Vue.js 用 v-for 正在更新已渲染过的元素列表时,它默认用“就地复用”策略。如果数据项的顺序被改变,Vue 将不会移动 DOM 元素来匹配数据项的顺序, 而是简单复用此处每个元素,并且确保它在特定索引下显示已被渲染过的每个元素。我们在使用的使用经常会使用index(即数组的下标)来作为key,但其实这是不推荐的一种使用方法。

    举个index作为key的例子:

    复制代码
     1 const list = [
     2     {
     3         id: 1,
     4         name: 'test1',
     5     },
     6     {
     7         id: 2,
     8         name: 'test2',
     9     },
    10     {
    11         id: 3,
    12         name: 'test3',
    13     },
    14 ]
    复制代码
    1 <div v-for="(item, index) in list" :key="index" >{{item.name}}</div>

    下面我们来看一看用index作为key的缺陷

    1.在最后一条数据后再加一条数据

    复制代码
     1 const list = [
     2     {
     3         id: 1,
     4         name: 'test1',
     5     },
     6     {
     7         id: 2,
     8         name: 'test2',
     9     },
    10     {
    11         id: 3,
    12         name: 'test3',
    13     },
    14     {
    15         id: 4,
    16         name: '我是在最后添加的一条数据',
    17     },
    18 ]
    复制代码

    运行结果:

    复制代码
    之前的数据                         之后的数据
    
    key: 0  index: 0 name: test1     key: 0  index: 0 name: test1
    key: 1  index: 1 name: test2     key: 1  index: 1 name: 我是插队的那条数据
    key: 2  index: 2 name: test3     key: 2  index: 2 name: test2
                                                 key: 3  index: 3 name: test3
    复制代码

    2.在中间插入一条数据

    复制代码
     1 const list = [
     2     {
     3         id: 1,
     4         name: 'test1',
     5     },
     6     {
     7         id: 4,
     8         name: '我是插队的那条数据',
     9     }
    10     {
    11         id: 2,
    12         name: 'test2',
    13     },
    14     {
    15         id: 3,
    16         name: 'test3',
    17     },
    18 ]
    复制代码

    运行结果:

    复制代码
    之前的数据                         之后的数据
    
    key: 1  id: 1 index: 0 name: test1     key: 1  id: 1 index: 0  name: test1
    key: 2  id: 2 index: 1 name: test2     key: 4  id: 4 index: 1  name: 我是插队的那条数据
    key: 3  id: 3 index: 2 name: test3     key: 2  id: 2 index: 2  name: test2
                                                             key: 3  id: 3 index: 3  name: test3
    复制代码

    通过上面清晰的对比,发现用index作为key的方式除了第一个数据可以复用之前的之外,另外三条数据都需要重新渲染。然而用每条数据的id作为key来标识数据的唯一性这种方式,只有新添加的数据需要渲染,其他的数据复用之前的数据。显然后一种方式更加的高效。

    建议尽可能在使用 v-for 时提供 key,除非遍历输出的 DOM 内容非常简单,或者是刻意依赖默认行为以获取性能上的提升。

    至于其中的原因是因为Virtual DOM 使用Diff算法实现的,详解请参考官方文档或参考https://www.jianshu.com/p/342e2d587e69博客

  • 相关阅读:
    php配置修改后,平滑启动php-fpm
    php-fpm参数调优
    php-fpm 高并发 参数调整 转
    redis分布式锁
    MySQL中group_concat函数 --- 很有用的一个用来查询出所有group by 分组后所有 同组内的 内容
    MySQL中information_schema 数据库 是干什么的
    Mysqldump参数大全 这 些参数 不同于 mysql 的那些参数(下边文章开头有链接) :2 种类型的参数含义是不一样的
    mysql命令行参数 --- 这些参数不同于 mysqldump 后的 那些参数(下边文章开头有链接) :2种类型的参数 含义是不一样的
    not found 什么时候触发
    intellJ svn控制错误
  • 原文地址:https://www.cnblogs.com/onesea/p/13405147.html
Copyright © 2011-2022 走看看