使用vue for时为什么要key【推荐】

 更新时间:2019-07-11 22:00:48   作者:佚名   我要评论(0)

前言:
用vue框架写前端代码时经常会用用到v-for这个方法,但使用此方法时vue推荐我们加上一个唯一标识key这是为什么呢?阅读了网上各位大神的文章以及自己的

前言:

用vue框架写前端代码时经常会用用到v-for这个方法,但使用此方法时vue推荐我们加上一个唯一标识key这是为什么呢?阅读了网上各位大神的文章以及自己的一些理解对这个问题有了新的认识。所以记录下来,若各位看官看到文章里面有错误的地方请指正一下。谢谢各位大佬。

一.diff算法

修改渲染真实的dom会引起整个dom树的重绘和重排。diff算法可以帮助我们只对我们想要修改的部分进行更新而不会引起整个dom树的重绘和重排。 我们先根据dom生成virtual DOM,当virtual Dom上的某个dom节点数据改变后会生成一个新的Vnode.将新生成的Vnode和oldVnode做对比。发现有修改的地方就直接渲染到真实的dom树上。

diff算法一边比较新旧节点的区别一边在真实的dom树上打补丁

二.key的作用

我个人觉得key的作用就是为了快速的找到新节点对应的旧节点。key是给每一个vnode唯一的id,可以依靠key,更准确, 更快的拿到oldVnode中对应的vnode节点。但不使用key时代码也可以运行但是会报warning.为什么呢。

三.不使用key时的执行

例:不使用key 一个数组arr=['1','2','3','4','5','6']

<view v-for='arr'>
    {{item}}
  </view>

上面代码会生成6个div每个div对应的arr中的数字。现在我们将arr变成[0, 1, 2, 3, 7, 8, 9]。更新渲染的步骤时这样的原先div中的1变成0 2变成1以此类推最后新增一个div内容为9。 Vue会通过改变原来元素的内容和增加/减少元素来完成这个改变,因为没有key属性,Vue无法跟踪每个节点,只能通过这样的方法来完成变更。

四.使用key时

例:numbers为[1, 2, 3, 7, 8, 9]

<div v-for="(num, index) in numbers" :key="index">
   {{num}}
  </div>

变成了[0, 1, 2, 3, 7,8,9]新增一个

元素,它的内容为0,并将它插入原先内容为1的元素之前。 在有了key属性之后,Vue会记住元素们的顺序,并根据这个顺序在适当的位置插入/删除元素来完成更新,这种方法比没有key属性时的就地复用策略效率更高。 总体来说,当使用列表渲染时,永远添加key属性,这样可以提高列表渲染的效率,提高了页面的性能。

总结

以上所述是小编给大家介绍的使用vue for时为什么要key属性,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

您可能感兴趣的文章:

  • 解决vue v-for 遍历循环时key值报错的问题
  • Vue中的v-for循环key属性注意事项小结
  • 浅谈Vue2.0中v-for迭代语法的变化(key、index)
  • vue中v-for循环给标签属性赋值的方法
  • Vue中控制v-for循环次数的实现方法
  • 关于vue v-for循环解决img标签的src动态绑定问题
  • vue 监听键盘回车事件详解 @keyup.enter || @keyup.enter.native
  • vue element-ui 绑定@keyup事件无效的解决方法

相关文章

  • 使用vue for时为什么要key【推荐】

    使用vue for时为什么要key【推荐】

    前言: 用vue框架写前端代码时经常会用用到v-for这个方法,但使用此方法时vue推荐我们加上一个唯一标识key这是为什么呢?阅读了网上各位大神的文章以及自己的
    2019-07-11
  • 聊聊spring boot的WebFluxTagsProvider的使用

    聊聊spring boot的WebFluxTagsProvider的使用

    序 本文主要研究一下webflux的WebFluxTagsProvider WebFluxTagsProvider spring-boot-actuator-2.1.5.RELEASE-sources.jar!/org/springframework/boot/
    2019-07-11
  • 微信小程序开发常见问题及解决方案

    微信小程序开发常见问题及解决方案

    前言 我们在做微信小程序开发的过程中,总会遇到各种奇葩的问题。今天就把我在小程序开发过程中遇到的各种问题,及对应的解决方案总结在这里,方便以后自己回
    2019-07-11
  • Docker基础教程之Dockerfile语法详解

    Docker基础教程之Dockerfile语法详解

    前言 Dockfile是一种被Docker程序解释的脚本,Dockerfile由一条一条的指令组成,每条指令对应Linux下面的一条命令。Docker程序将这些Dockerfile指令翻译真正的
    2019-07-11
  • SpringCloud版本问题报错及解决方法

    SpringCloud版本问题报错及解决方法

    问题 springboot 集成springcloud时常常由于版本问题而报错,如下: com.sun.jersey.api.client.ClientHandlerException: java.net.ConnectException: Conn
    2019-07-11
  • 深入了解Python iter() 方法的用法

    深入了解Python iter() 方法的用法

    今天我们来介绍下Python基础教程学习之iter() 方法另外的用法。据说很少有人知道这个用法! 一、上代码、学用法 我们都比较熟悉 iter(obj),会返现一个迭代
    2019-07-11
  • Python日志无延迟实时写入的示例

    Python日志无延迟实时写入的示例

    我在用python生成日志时,发现无论怎么flush(),文件内容总是不能实时写入,导致程序意外中断时一无所获。 以下是查到的解决方案(亲测可行): open 函数中
    2019-07-11
  • 在PyCharm中控制台输出日志分层级分颜色显示的方法

    在PyCharm中控制台输出日志分层级分颜色显示的方法

    1、把下面代码复制到一个.py文件中 #!/usr/bin/env python # encoding: utf-8 import logging # now we patch Python code to add color support to logg
    2019-07-11
  • python使用装饰器作日志处理的方法

    python使用装饰器作日志处理的方法

    装饰器这东西我看了一会儿才明白,在函数外面套了一层函数,感觉和java里的aop功能很像;写了2个装饰器日志的例子, 第一个是不带参数的装饰器用法示例,功能
    2019-07-11
  • 微信小程序实现类似微信点击语音播放效果

    微信小程序实现类似微信点击语音播放效果

    本文实例为大家分享了微信小程序类似平常微信语音聊天的效果,不会互相干扰播放状态,供大家参考,具体内容如下 根据开发的需求,先理清一下思路,点击语音播
    2019-07-08

最新评论