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. Oracle PL/SQL异常、存储过程和触发器

    一.异常 1.处理异常 (1)除数不为0 declare b number; begin b:; exception when zero_divide then dbms_output.put_lin ...

  2. oracle数据库中字符乱码

    1.1         88.152 os已安装中文包,以下确认os层面中文是否可以显示 1.2         88.153 os没有安装中文包,以下确认os层面中文无法显示 1.3         ...

  3. 【LeetCode】大数相乘

    1. 模拟手工计算 原理: 将 string 反转存储在 int 数组中,如 A = 17 = (7, 1),B = 25 = (5, 2),亦即幂表示法,幂次是从低位到高位. 作逐位相乘,即 ai ...

  4. Linux下zoopkeeper的安装和启动

    Linux下zoopkeeper的安装和启动 1.什么是zookeeper ZooKeeper是一个分布式的,开放源码的分布式应用程序协调服务,是Google的Chubby一个开源的实现,是Hadoo ...

  5. Pandas初学者代码优化指南

    原文:A Beginner’s Guide to Optimizing Pandas Code for Speed 作者:Sofia Heisler 翻译:无阻我飞扬 摘要:Pandas 是Pytho ...

  6. Linux安装配置samba教程(CentOS 6.5)

    一.服务端安装配置samba 1.1 服务端安装samba yum install -y samba 1.2 创建共享目录并写入配置文件 以/samba为共享目录为例,为了更直观地观测我们在该目录中创 ...

  7. python截取字符串

    str = ‘0123456789’ print str[0:3] #截取第一位到第三位的字符 print str[:] #截取字符串的全部字符 print str[6:] #截取第七个字符到结尾 p ...

  8. day2-python工具的选择使用

    Python 编辑工具的选择 在Python的交互式命令行写程序,好处是一下就能得到结果,坏处是没法保存,下次还想运行的时候,还得再敲一遍. 所以,实际开发的时候,我们总是使用一个编辑器来写代码,写完 ...

  9. linux-安装jdk以及tomcat

    1.安装jdk   下载地址:www.oracle.com/technetwork/cn/java/javase/downloads/jdk7-downloads-1880260.html 将jdk下 ...

  10. oracle查看编码以及修改编码

    oracle的编码一直是个很重要的问题,以前也总结的写过,但都忘了,今天再在这写一下. 首先查看oracle数据库的编码 SQL>select * from nls_database_param ...