key 的特殊属性主要用在 Vue的虚拟DOM算法,在新旧nodes对比时辨识VNodes。如果不使用key,Vue会使用一种最大限度减少动态元素并且尽可能的尝试修复/再利用相同类型元素的算法。使用key,它会基于key的变化重新排列元素顺序,并且会移除key不存在的元素。

  有相同父元素的子元素必须有独特的key。重复的key会造成渲染错误。

  最常见的用例是结合 v-for:

<ul>
<li v-for="item in items" :key="item.id">...</li>
</ul>

  

  它也可以用于强制替换元素/组件而不是重复使用它。当你遇到如下场景时它可能会很有用:

  完整地触发组件的生命周期钩子
  触发过渡

<transition>
<span :key="text">{{ text }}</span>
</transition>

  当 text 发生改变时,<span> 会随时被更新,因此会触发过渡。

  

vue 之 key的更多相关文章

  1. (转)Vue种key的作用

    https://blog.csdn.net/qq_41861679/article/details/80659278 https://cn.vuejs.org/v2/api/#key 其实不只是vue ...

  2. vue中key的作用 v-for里警告 v-if的复用

    vue总是会复用页面上已经存在的dom,区别的方法是加上key就可以,还设有v-for时候的警告也是如此key的作用是区别这条跟那条的.<body> <div id="ap ...

  3. Vue: 用 key 管理可复用的元素

    <div id="login"> <template v-if="loginType === 'username'"> <labe ...

  4. 关于Vue中:key="index"的console警告

    在写vue项目时,浏览器的console出现如下警告信息: [Vue warn]: Property or method "index" is not defined on the ...

  5. Vue中 key keep-alive

    keep-alive key <!DOCTYPE html> <html> <head> <title></title> <scrip ...

  6. vue 使用key唯一令牌解决表单值混乱

    vue在渲染元素时,出于效率考虑,会尽可能地复用已有元素的而非重新渲染,如果你不希望这样可以使用Vue中提供的key属性,它可以让你决定是否要复用元素,key值必须是唯一的 代码: <!doct ...

  7. VUE router-view key 属性解释

    router-view 作用, 你可以 router-view 当做是一个容器,它渲染的组件是你使用 vue-router 指定的. <template> <section clas ...

  8. Vue的Key属性,v-for和v-if,v-if/v-show,v-pre不渲染,v-once只渲染一次

    key属性为什么要加 key -- api 解释 key的特殊属性主要用在vue的虚拟dom算法,如果不适用key,vue会使用一种最大限度减少动态元素并且尽可能的尝试修复/再利用相同类型元素的算法. ...

  9. vue中 key 值的作用

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

随机推荐

  1. ubuntu server 启用mysql日志

    1.要启动mysql日志,你就要找到mysql 核心的文件my.cnf  (路径:/etc/mysql) 在命令窗口输入:cd /etc/mysql 在命令窗口输入:ls 你就可以看到my.cnf文件 ...

  2. BIT-区间修改单点查询

    正好刷题时碰到了这个之前遇到过的问题,类似的还有区间修改区间查询,以后学了会补上. 我们知道BIT只支持单点修改区间查询,如果现在问题变成每次让一个区间的数同时变化,然后询问的是某一个点得值的时候该怎 ...

  3. Maven管理jar包依赖常出现的不能实例化类的问题

    you'ji 在maven管理jar包依赖时,存在一种常见的问题. pom.xml文件配置没问题,通过eclipse里中的maven dependencies查看,也确实有这个jar 包,或者这个类. ...

  4. JavaScript 上万条数据 导出Excel文件(改装版)

    最近项目要js实现将数据导出excel文件,网上很多插件实现~~那个开心呀,谁知道后面数据量达到上万条时出问题:浏览器不仅卡死,导出的excel文件一直提示网络失败.... debug调试发现var  ...

  5. MFC消息-自定义消息

    转:http://blog.csdn.net/penpenandtongtong/article/details/18598907 像MFC的窗口发送消息,可以进行自定义的动作行为,因此很多时候非常有 ...

  6. py 正在爬取第%d页的美眉图

    #coding=utf-8import reimport requestsfrom bs4 import BeautifulSoupnums = 1num = 1while True: url = & ...

  7. 【转载】offer经验

    http://www.cnblogs.com/figure9/archive/2013/01/09/2853649.html

  8. python使用变量

    #不建议用加号,建议用.format name = input('name:') age = input('age:') print( name ,age) print('姓名:',name,'年龄: ...

  9. 6.3 C++修改字符串

    参考:http://www.weixueyuan.net/view/6392.html 总结: string字符串同样可以像字符串数组那样按照下标逐一访问字符串中的每一个字符,string字符串的起始 ...

  10. SQL-33 创建一个actor表,包含如下列信息

    题目描述   创建一个actor表,包含如下列信息 列表 类型 是否为NULL 含义 actor_id smallint(5) not null 主键id first_name varchar(45) ...