v-for渲染的列表的结构采用“就地复用”的策略，也就说当数据重新排列数据时，会复用已在页面渲染好的元素，不会移动 DOM 元素来匹配数据项的顺序，这种模式是高效的，改变现有位置的结构的数据即可

eg：
问题：点击翻转数组哦，高亮并没有跟随1 在最后，而是直接复用在4上
原因：点击翻转数组哦，高亮并没有跟随1 在最后，而是直接复用在4上

解决：需要提供一个唯一的key值（常用ID），以便它能跟踪每个节点的身份，从而重用和重新排序现有元素

vue -- key的特殊作用的更多相关文章

  1. vue、react中循环遍历为什么会有key，key有什么作用？

    先讲一下,vue和react都是在操作虚拟dom,并且根据diff算法进行新旧dom对比,从而更新dom,以vue举例: vue官方文档中写到有 key 的特殊属性主要用在 Vue 的虚拟 DOM 算 ...

  2. vue中 key 值的作用

    原文地址 我们知道,vue和react都实现了一套虚拟DOM,使我们可以不直接操作DOM元素,只操作数据便可以重新渲染页面.而隐藏在背后的原理便是其高效的Diff算法. vue和react的虚拟DOM ...

  3. vue key的作用

    key的作用是什么? 简单来说: key是给每一个vnode的唯一id,可以依靠key,更准确, 更快的拿到oldVnode中对应的vnode节点. 1. 更准确 因为带key就不是就地复用了,在sa ...

  4. 写 React / Vue 项目时为什么要在列表组件中写 key，其作用是什么

    怼一波,在项目中有很多经常用到,但又含糊不清的知识点 框架中的key: 1. 为啥在遍历元素时要用 key :在开发过程中为了保证遍历同级元素的唯一性,用来提高更新 dom 的性能: 2. 凭啥要保证 ...

  5. vue中template的作用及使用

     先来看一个需求:下图div用v-for做了列表循环,现在想要span也一起循环,应该怎么做? 有3种方法可以实现 ①:直接用v-for对span也循环一次(该方法虽然可以使用,但不要用这种方式,因为 ...

  6. vue中moudles的作用及使用方法

    1.作用:vuex允许把store分割为模块,每一个模块都有自己的state,actions,getters,mutations甚至是嵌套一些子模块,从上到下进行同样方式的分割 在文件src中创建一个 ...

  7. vue组件name的作用小结

    我们在写vue项目的时候会遇到给组件命名 这里的name非必选项,看起来好像没啥用处,但是实际上这里用处还挺多的 ? 1 2 3 export default {    name:'xxx' } 1. ...

  8. 【react】---react中key值的作用

    一.React中key值得作用 react中的key属性,它是一个特殊的属性,它是出现不是给开发者用的,而是给React自己使用,有了key属性后,就可以与组件建立了一种对应关系,简单说,react利 ...

  9. vue中is的作用和用法

    回顾vue官方文档的过程中发现了is这个特性,虽然以我的写代码风格实在用不上,不过还是记录一下这个知识点 is的作用 <ul> <li></li> <li&g ...

随机推荐

  1. 父亲节感恩回馈PSD海报

    父亲节感恩回馈PSD素材免费下载海报适用于父亲节海报设计 http://www.huiyi8.com/psd/

  2. BZOJ 1673 [Usaco2005 Dec]Scales 天平：dfs 启发式搜索 A*搜索

    题目链接:http://www.lydsy.com/JudgeOnline/problem.php?id=1673 题意: 有n个砝码(n <= 1000),重量为w[i]. 你要从中选择一些砝 ...

  3. static语句块的执行时间

    package utfTest; public class Test01 { public static void main(String[] args) { //Person.show(); Sys ...

  4. legend2---开发日志15（功能需求明确，设计好类和结构的好处是）

    legend2---开发日志15(功能需求明确,设计好类和结构的好处是) 一.总结 一句话总结: 极快简化编程,节约大量时间 1.多个类型的物品,比如商店和寻宝的丹药,装备,特性书,英雄石等等 应该怎 ...

  5. 中文标准web字体

    标准的简体中文web字体: Windows OS X 黑体:SimHei 冬青黑体: Hiragino Sans GB [NEW FOR SNOW LEOPARD] 宋体:SimSun 华文细黑:ST ...

  6. 集训Day4

    在bzoj刷了好几天杂题感觉手感不是很好 继续回来集训一下 好几天没更新了啊... bzoj1875 一个无向图,一个人要从起始点走$t$步走到终点,不能沿着刚走过来那条边回去,问有多少种走法 $m ...

  7. js 图片上传

    可能很多不熟悉的图片上传的同学会觉得有点懵,其实做过一次你就会发现特别的简单. 只是一个formData格式的表单提交,把地址写到 action = "" 里面就可以了,当然你可以 ...

  8. DataGridColum的bug

    Datagrid有多个bug: 1,不支持DynamicResource的东西 2, 在Column隐藏后再显示, ColumnHeader的Tag或者DataContext为null. 解决办法: ...

  9. μC/OS-II与RT-Thread对比—任务调度

    在任务调度器的实现上,μC/OS-II和RT-Thread都采用了位图调度(bitmap scheduling),任务优先级的值越小则代表具有越高的优先级,主要区别在于实现形式,是采用多级队列的形式, ...

  10. 人工智能实践：linux 和 python 基础简介

    linux下的目录 绝对路径:是以根目录(" / ")为起点的完整路径,以你所要到的目录为终点. 相对路径:是你当前的目录(" .")为起点的路径,以你所要到的 ...