Vue的v-for不绑定key，默认行为和绑定key="index"是差不多的，官方没有默认这种行为的情况下，会导致所有列表DOM重新渲染。key="index"这种行为无法最大化性能，比如在第一个元素插入新元素，会导致所有列表DOM重新渲染。绑定key后，发现绑定的key值的元素变化了，就重新渲染该元素，而不是全部元素都重新渲染，会提高性能。性能主要是DOM渲染影响。key绑定id一类的唯一键好处就是
在列表中插入某个元素，不会像index那样导致后面的元素全部重新渲染，而是根据绑定id的元素是否变化渲染。

https://segmentfault.com/a/1190000013810844
https://www.zhihu.com/question/61064119
https://www.cnblogs.com/tim100/p/7262963.html

Vue中v-for不绑定key会怎样的更多相关文章

  1. vue中的数据双向绑定

    学习的过程是漫长的,只有坚持不懈才能到达到自己的目标. 1.vue中数据的双向绑定采用的时候,数据劫持的模式.其实主要是用了Es5中的Object.defineProperty;来劫持每个属性的get ...

  2. vue中v-model 数据双向绑定

    表单输入绑定 v-model 数据双向绑定,只能应用在input /textare /select <div id="app"> <input type=&quo ...

  3. 理解vue中v-for循环中得key原理及一些错误

    作用:给节点做一个标识,相当于人类的身份证号,虚拟DOM中的标识 下列是key值的一些使用场景和带来的问题:   js:    const vm = new Vue({             el: ...

  4. 纯小白入手 vue3.0 CLI - 2.3 - 组件 home.vue 中学习指令和绑定

    vue3.0 CLI 真小白一步一步入手全教程系列:https://www.cnblogs.com/ndos/category/1295752.html 我的 github 地址 - vue3.0St ...

  5. Vue中class与style绑定

    gitHub地址:https://github.com/lily1010/vue_learn/tree/master/lesson07 一 用对象的方法绑定class 很简单,举个栗子: <!D ...

  6. vue中html模板使用绑定的全局函数

    我们知道在script中使用vue绑定的全局函数时, 我们需要用这种方式使用: this.Util.Fun(e) 那在模板中, 比如v-if中想使用Fun函数怎么办呢?你应该这样做 <i v-i ...

  7. 利用设置新数据存储结构解决vue中折叠面板双向绑定index引起的问题

    问题背景是,在进行机器性能可视化的前端开发时,使用折叠面板将不同机器的性能图表画到不同的折叠面板上去.而机器的选择利用select下拉选项来筛选. 由于在折叠面板中,通过 如下v-model双向绑定了 ...

  8. vue中多个input绑定enter按键事件

    默认再每个input上加 keyup.enter 是可以绑定事件的 可是多个input一起绑定同一个事件就比较麻烦 所以就在vue dom里面遍历查找并绑定事件 let handleEnter = ( ...

  9. vue中时间控件绑定多个输入框

    首先去下载laydate时间控件,引入到相应的模板中 <input type="text" val-required="" value="&qu ...

  10. vue中如何动态的绑定图片，vue中通过data返回图片路径

    在项目中遇到需要动态的改变图片路径,图片路径并非是从后台获取过来的数据. 因此在data中必须用require加载,否则会当成字符串来处理. 效果:

随机推荐

  1. LeetCode_Construct Binary Tree from Preorder and Inorder Traversal

    一.题目 Construct Binary Tree from Preorder and Inorder Traversal My Submissions Given preorder and ino ...

  2. 洛谷——P1011 车站

    https://www.luogu.org/problem/show?pid=1011#sub 题目描述 火车从始发站(称为第1站)开出,在始发站上车的人数为a,然后到达第2站,在第2站有人上.下车, ...

  3. ASP.NET配置文件里经常使用到的节点信息

     web.config文件是一个XML文件,是以<confirguration>为根结点展开的. 上一面从宏观上解说了一下有关配置的文件的内容,以下是一些有关于配置文件经常使用的操作. ...

  4. Maven基础教程 分类： C_OHTERS 2015-04-10 22:53 232人阅读 评论(0) 收藏

    更多内容请参考官方文档:http://maven.apache.org/guides/index.html 官方文档很详细,基本上可以查找到一切相关的内容. 另外,快速入门可参考视频:孔浩的maven ...

  5. python爬虫（一）抓取 色影无忌图片

    原文地址: http://www.30daydo.com/article/56 由于平时爱好摄影.所以喜欢看看色影无忌论坛的获奖摄影作品,所以写了个小script用来抓取上面的获奖图片,亲自測试能够使 ...

  6. Angular 2 HostListener & HostBinding

    原文 https://www.jianshu.com/p/20c2d60802f7 大纲 1.宿主元素(Host Element) 2.HostListener 3.HostListenerDecor ...

  7. 关于win10输入法ctrl+shift+f和idea组合键冲突的解决办法。

    先Ctrl+F,按住Ctrl,再按Shift+F. 因为win10的输入法热键无法关闭(在后期的版本中好像可以了,不过没更新),在IEDA中ctrl+shift+f组合键没法使用,可以按如下按键组合使 ...

  8. .NET Framework基础知识（三）(转载)

    .正则表达式:用一串字符验证是否符合一种规范,这个规范就是正则表达式. .正则表达式中常用的元字符: . 匹配除换行符以外的任意字符 \w 匹配字母或数字或下划线或汉字 \s 匹配空白符 \d 匹配数 ...

  9. [转载]剥析surging的架构思想

    1.前言 2.通信机制 2.1 简介      在单体应用中,模块之间的调用通信通过引用加载方法或者函数来实现,但是单体应用最终都会因为团队壮大,项目模块的扩展和部署等出现难以维护的问题.随着业务需求 ...

  10. php实现求二进制中1的个数（右移、&、int32位）（n = n & (n - 1);）

    php实现求二进制中1的个数(右移.&.int32位)(n = n & (n - 1);) 一.总结 1.PHP中的位运算符和java和c++一样 2.位移运算符看箭头方向,箭头向左就 ...