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. subline 自己使用的插件

    http://blog.csdn.net/jianhua0902/article/details/43761899 https://www.cnblogs.com/qingkong/p/5039527 ...

  2. git拉取远程分支并创建本地分支

    本地分支推送至远程 git checkout local_branch git push origin local_branch:remote_branch 一.查看远程分支 使用如下Git命令查看所 ...

  3. MySql(九)索引

    一.索引的介绍 数据库中专门用于帮助用户快速查找数据的一种数据结构.类似于字典中的目录,查找字典内容时可以根据目录查找到数据的存放位置吗,然后直接获取. 二 .索引的作用 约束和加速查找 三.常见的几 ...

  4. MYSQL--三大范式

    MYSQL--三大范式 范式简介: 设计关系数据库时,遵从不同的规范要求,设计出合理的关系型数据库,这些不同的规范要求被称为不同的范式,各种范式呈递次规范,越高的范式数据库冗余越小.目前关系数据库有六 ...

  5. Qt Widgets——菜单和菜单栏

    主窗口MainWindow需要菜单栏QMenuBar及菜单QMenu来组成自身,一般应用程序的所有功能都能在菜单中找到.接下来就来说说它们. QMenu 它添加了很多动作QAction,并用自身组成了 ...

  6. 将16进制unsigned char数组转换成整数

    /** * 将unsigned char数组转换成long long数值 * {0x00 0x00 0x20 0x00}转换之后得到8192 * * @param str 数组 * @param le ...

  7. linux网络操作 ifconfig命令

    ifconfig 查看已经被激活的网卡详细信息 "ifconfig eth0" 查看特定的网卡信息 [root@ssgao ~]# ifconfig eth0 eth0 Link ...

  8. windows 路由的配置

    查看ip路由表 route print : netstat -r windows 下添加一条路由 route命令 route [-f][-p][command [distinataion] [MASK ...

  9. linux初始化宏__init, __exit

    我们在内核中经常遇到初始化函数是这样定义的:static int __init init_func(); ,与普通函数相比,定义中多了__init.那么,__init是什么意思呢?还有与其匹配的__e ...

  10. 女生可不可以进入IT行业做Linux运维工程师?

    不知从何时起有那么一个不成文的理论:女生不适合做IT.在很多人看来,IT is a men’s world,女生学IT是件匪夷所思的事情.在传统的思维当中,女生只适合从事像教师.会计.公务员等稳定的职 ...