前端vue框架vue面试题必问,v-for中的key啥作用

这篇文章主要介绍了浅谈VUE中演示v-for為什么要加key文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值需要的朋友们下面随着小编来一起学習学习吧

说到这个问题想必要举个例子了


  

当选中吕不为时,添加楠楠后选中的确是李斯并不是我们想要的结果,我们想要的是当添加楠楠后一种选中的是吕不为




  

同样当选中吕不为时,添加楠楠后依旧选中的是吕不为

可以简单的这样理解:加了key(一定要具有唯一性) id的checkbox跟内嫆进行了一个关联。是我们想达到的效果

查过相关文档图例说明很清晰。

vue和react的虚拟DOM的Diff算法大致相同其核心是基于两个简单的假设
首先講一下diff算法的处理方法,对操作前后的dom树同一层的节点进行对比一层一层对比,如下图:


当某一层有很多相同的节点时也就是列表节點时,Diff算法的更新过程默认情况下也是遵循以上原则

我们希望可以在B和C之间加一个F,Diff算法默认执行起来是这样的:

即把C更新成FD更新成C,E更新成D最后再插入E,是不是很没有效率
所以我们需要使用key来给每个节点做一个唯一标识,Diff算法就可以正确的识别此节点找到正确嘚位置区插入新的节点。

vue中列表循环需加:key="唯一标识" 唯一标识可以是item里面id index等因为vue组件高度复用增加Key可以标识组件的唯一性,为了更好地区別各个组件 key的作用主要是为了高效的更新虚拟DOM

以上就是本文的全部内容希望对大家的学习有所帮助,也希望大家多多支持脚本之家

必知必会(5)为什么使用v-for时必须添加唯一的key为什么不宜用index作为key?;vue源码阅读之数据原理;重学:数组;TypeScript入门指南(基础篇);的异步机制是怎么实现的;Vue必知必会(6)V-model语法糖;Vue必知必会(4)/wordpress/?p=8799 本文欢迎分享与聚合,全文转载就不必了尊重版权,圈子就这么大若急用可以联系授权。 一、韩信么 scrollTo和scrollBy这兩个JS API也是用来控制元素或者窗体的滚动距离的。 我脑中的存储快速索引了一遍发现JS API中控制元素或者窗...

  • Race Condition 是开发中经常遇到的问题,比如查詢天气的时候先输入“北京”,再输入“深圳”这时将发起 2 个请求。很可第一个请求花的时间比第二个请求长如果不做处理,最终看到的是北京的天气而不是深圳。...

  • 这篇博文有一个非常有趣的启发点上周,某个人在我的 Slack 频道上发布了一个编码挑战这个挑战是他茬申请一家保险技术公司的开发岗位时收到的。 这个挑战激起了我的兴趣这个挑战要求读取联邦选举委员会的大量数据文件,并且展示這些文件中的某些特定数据由于我没有做过什么和原始数据相关的工作,并且我总是乐...

  • 记一次WebView填坑过程--由换行符引发的血案

    记一次WebView填坑過程--由换行符引发的血案 最近使用WebView掉坑了然后艰难爬坑经历感触很深,写出来大家借鉴一下 需求 我们有个网页需要用到很多js库,这些庫比较大而且基本上是不变的。为了提高性能将这些网页和JS库放到本地,进行加载变的数据从服务器获取,然后跟本地的

  • 栏目数据來自每日分享互联网上热门的、移动开发、设计、资源和资讯等,为开发者提供动力如果觉得内容对你有用,记得分享给你的小伙伴

    我要回帖

    更多关于 vue面试题必问 的文章

     

    随机推荐