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. 创建型模式篇(单例模式Single Pattern)

    一.单例模式(Singleton Pattern) 单例模式要求一个类只能有一个实例,并且提供了一个全局的访问点. 比如说,中国主席的职位是Singleton,法律规定主席选举,任何时间只能有一个主席 ...

  2. 构造&析构

    构造&析构函数 构造函数 定义:与类同名,可以有参可以无参,主要功能用于在类的对象创建时定义初始化的状态,无返回值,也不能用void修饰,构造函数不能被直接调用,必须通过new运算符在创建对象 ...

  3. 小程序-wepy学习

    组件通信与交互 推荐网址:https://tencent.github.io/wepy/document.html#/?id=%e7%bb%84%e4%bb%b6%e9%80%9a%e4%bf%a1% ...

  4. TortioseSVN切换账号教程

    TorioseSVN如果不记住用户名密码那么基本每样连接服务器的操作都要重新请求认证这很麻烦,所以我们一般选择记住用户认证信息. 但记住用户认证信息后以后每次登录都后台自动以该用户身份登录,不像QQ自 ...

  5. Kali配置教程

    1.配置软件源 所有操作没有说明,都是以root身份执行. 打开一个终端执行: cat >> /etc/apt/sources.list <<EOF deb http://mi ...

  6. bootstrap 弹框使用

    首先需要准备bootstrap.css,bootstrap .js  jquery 我这里有写好的下载地址如下: https://pan.baidu.com/s/1miMahXe  秘钥:tgts & ...

  7. git Please move or remove them before you can merge.

    git clean -d -fx "" 其中  x -----删除忽略文件已经对git来说不识别的文件 d -----删除未被添加到git的路径中的文件 f -----强制运行

  8. 【例子】log4j.properties例子讲解

    log4j.rootLogger=info, ServerDailyRollingFile, stdout log4j.appender.ServerDailyRollingFile=org.apac ...

  9. day06 元组类型

    一.什么是元组? 元组就是一个不可变的列表 元组的基本使用: 1.用途:  用于存放多个值,当存放多个任意类型的值 2.定义方式:在()内用逗号分隔开多个任意类型的值 t=(1,3.1,'aaa',( ...

  10. 用老毛桃U盘安装:[3]Ghost版Win7系统

    用老毛桃自动安装Ghost版Win7的步骤: 1,到网上先下载Ghost版Win7映像文件到硬盘,我放到的是U盘,盘符为Z,如果你愿意,可直接放到硬盘即可,放到硬盘安装速度会快一点. 2,把制作好的老 ...