使用vue for时为什么要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属性,希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！
如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！

赞 (0)

相关推荐

  • 关于vue v-for循环解决img标签的src动态绑定问题

    在解决这个问题上,遇到了很多错误的方案,一直没有跑通,有些是图片标记出现了,但是图片内容没有出现,这就很让人头疼了,下面,我讲解我操作成功的案例吧. 1.目录结构如下 图片放置在与src同级的static文件夹下,在这里,我放置在slider中 2.数据配置如下: 注意引入的路径,直接从static文件中对应的地方引入. data () { return { product:[ { "src":'../../static/slider/logo1.jpg', "decerat

  • 解决vue v-for 遍历循环时key值报错的问题

    一 .问题如下: [Vue warn] Avoid using non-primitive value as key, use string/number value instead. non-primitive表示的是对象 这里的[Vue warn]是指不要用对象或是数组作为key,用string或number作为key. :key相当于是索引的作用,提高循环性能,如果循环量较小,不写也可以的. 以上这篇解决vue v-for 遍历循环时key值报错的问题就是小编分享给大家的全部内容了,希望能

  • Vue中控制v-for循环次数的实现方法

    在Vue中的遍历方法v-for控制循环次数的方法可以通过以下两种方法 1.截取循环的数据 v-for="(item,index) in domainList.slice(0, 2)" 用这样的方法可以截取循环的数据长度,从而控制循环的次数 2.通过v-if来控制 v-for="(item,index) in domainList" v-if="index<3" 在标签下紧跟v-if来进行控制,这里是用索引来进行控制的,所以循环的时候记得把i

  • vue element-ui 绑定@keyup事件无效的解决方法

    解决办法: <el-input v-model="searchParmas.gameName" placeholder="游戏名称" class="w120" @keyup.native="getGameList(searchParmas.gameName)"></el-input> 加上.native覆盖原有封装的keyup事件即可. 以上这篇vue element-ui 绑定@keyup事件无效的解

  • 浅谈Vue2.0中v-for迭代语法的变化(key、index)

    今天,在写关于Vue2.0的代码中发现 $key这个值并不能渲染成功,问题如下: 结果这个对象的key值并不能够显示: 后来查阅了文档才知道,这是因为在Vue2.0中,v-for迭代语法已经发生了变化: 丢弃了: 新数组语法 value in arr (value, index) in arr 新对象语法 value in obj (value, key) in obj (value, key, index) in obj 解决后: 以上这篇浅谈Vue2.0中v-for迭代语法的变化(key.i

  • vue 监听键盘回车事件详解 @keyup.enter || @keyup.enter.native

    vue运行为v-on在监听键盘事件时,添加了特殊的键盘修饰符: <input v-on:keyup.13="submit"> vue还非常贴心地给出了常用按键的别名,这样就不必去记keyCode ~ ~ 上面代码,还可以在这样写: <input v-on:keyup.enter="submit"> <input @keyup.enter="submit"> 全部的键盘别名: .enter .tab .delet

  • Vue中的v-for循环key属性注意事项小结

    当Vue用 v-for 正在更新已渲染过的元素列表是,它默认用"就地复用"策略.如果数据项的顺序被改变,Vue将不是移动DOM元素来匹配数据项的改变,而是简单复用此处每个元素,并且确保它在特定索引下显示已被渲染过的每个元素. 为了给Vue一个提示,以便它能跟踪每个节点的身份,从而重用和重新排序现有元素,你需要为每项提供一个唯一 key 属性.key属性的类型只能为 string或者number类型. 在下面这个例子中,如果不给 p 元素绑定key,我先选中第一个, 然后输入ID和Nam

  • vue中v-for循环给标签属性赋值的方法

    1.给每个按钮添加class的属性值以及icon图标属性值,通过v-for实现自动添加样式,发现属性值无法显示,切记在属性前加上v-bind <html> <head> <meta charset="utf-8"> <title>v-for在线测试实例</title> <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"> &

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

    前言: 用vue框架写前端代码时经常会用用到v-for这个方法,但使用此方法时vue推荐我们加上一个唯一标识key这是为什么呢?阅读了网上各位大神的文章以及自己的一些理解对这个问题有了新的认识.所以记录下来,若各位看官看到文章里面有错误的地方请指正一下.谢谢各位大佬. 一.diff算法 修改渲染真实的dom会引起整个dom树的重绘和重排.diff算法可以帮助我们只对我们想要修改的部分进行更新而不会引起整个dom树的重绘和重排. 我们先根据dom生成virtual DOM,当virtual Dom

  • Vue 页面切换效果之 BubbleTransition(推荐)

    CodePen 地址 前端使用 SPA 之后,能获得更多的控制权,比如页面切换动画,使用后端页面我们可能做不了上面的效果,或者做出来会出现明显的闪屏.因为所有资源都需要重新加载. 今天使用 vue,vue-router,animejs 来讲解如何上面的效果是如何实现的. 步骤 点击菜单,生成 Bubble,开始执行入场动画 页面跳转 执行退场动画 函数式调用组件 我希望效果是通过一个对象去调用,而不是 v-show, v-if 之类的指令,并且为了保持统一,仍然使用 Vue 来写组件.我通常会用

  • 解决Vue编译时写在style中的路径问题

    解决Vue编译时写在style中的路径问题

    写在vue文件里面的style样式,在添加例如背景图片的时候,如果用的是相对路径,那么build出来的css文件的路径将会出错,导致找不到图片. 通过查找资料,在https://segmentfault.com/q/1010000008438061有人的回答解决了问题. 要修改主要有两个,一个就是config/index.js文件,将assetsPublicPath的路径改为'./',这是发布路径,如果构建后的产品文件有用于发布CDN或者放到其他域名的服务器,可以在这里进行设置设置之后构建的产品

  • vue渲染时闪烁{{}}的问题及解决方法

    v-if和v-show可能是日常开发中最常用的两个指令,虽然看上去两者功能是类似的,但是两者还是存在很大区别的.  v-if与v-show区别: 在切换 v-if 块时,Vue.js 有一个局部编译/卸载过程,因为 v-if 之中的模板也可能包括数据绑定或子组件.v-if 是真实的条件渲染,因为它会确保条件块在切换当中合适地销毁与重建条件块内的事件监听器和子组件. v-if 也是惰性的:如果在初始渲染时条件为假,则什么也不做--在条件第一次变为真时才开始局部编译(编译会被缓存起来). 相比之下,

  • 使用vue打包时vendor文件过大或者是app.js文件很大的问题

    第一次使用vue2.0开发,之前都是用的angular1.x.在使用vue-cli脚手架打包后(UI用的Element-ui),发现vendor文件很大,将近1M左右..后来翻阅资料才明白,原来webpack把所有的库都打包到了一起,导致文件很大. 我的解决办法: 1.把不常改变的库放到index.html中,通过cdn引入,比如下面这样: 然后找到build/webpack.base.conf.js文件,在 module.exports = { } 中添加以下代码 externals: { '

  • vue 弹窗时 监听手机返回键关闭弹窗功能(页面不跳转)

    [注]:popstate 事件 a.当活动历史记录条目更改时,将触发popstate事件. b.如果被激活的历史记录条目是通过对history.pushState()的调用创建的,或者受到对history.replaceState()的调用的影响,popstate事件的state属性包含历史条目的状态对象的副本. c.需要注意的是调用history.pushState()或history.replaceState()不会触发popstate事件. d.只有在做出浏览器动作时,才会触发该事件,如用

  • 关于vue打包时的publicPath就是打包后静态资源的路径问题

    关于vue打包时的publicPath就是打包后静态资源的路径问题

    情况一 当不配置vue.config.js或者没有publicPath属性时,默认访问的静态路径是服务器的根目录 服务器根目录下没有js文件夹所以访问失败,把dist下的js,css等静态文件剪切到wamp/www目录下就可以正常访问了(注意重启wamp) 情况二 当配置为当前目录’./’ 访问正常,其实publicPath当前目录即打包后的index.html的当前目录,即dist目录,怎么证明,把publicPath的值设置为’…/’,看看情况三 情况三 又报错,把js,css等静态文件复制

  • axios+vue请求时携带cookie的方法实例

    axios+vue 请求时如何携带cookie 1,当符合同源策略时,可以直接设置 document.cookie = " 你要设置的内容 " mounted() { document.cookie = "ioiopipoadiasdasdbasdbas"; // 非跨域传递cookie 直接设置cookie即可 this.getData(); //请求的方法 }, methods: { async getData() { let data = await axio

  • VsCode工具开发vue项目必装插件清单(推荐!)

    目录 1.概述 2.VsCode插件清单 2.1.Vetur插件让vue文件代码高亮 2.2.Vue VSCode Snippets自动生成vue模板内容插件 1.安装插件 2.使用插件生成vue模板代码 2.3.LiveServer实时刷新网页 1.安装LiveServer 2.使用LiveServer打开网页 3.开启自动保存 2.4.开发工具设置2个空格缩进 2.5.browser插件浏览器插件查看html文件 1.安装创建 2.浏览html文件 2.6.设置目录分级显示 2.7.Brac

随机推荐