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. set unused的用法(ORACLE删除字段)

    set unused的用法(ORACLE删除字段) 一.问题 现场有一张大数据量的分区表,数据量在10G以上.因某种原因需要删除其中的某些字段.如果直接用alter table1 drop (colu ...

  2. Qt Widgets——抽象旋转框及其继承类

    默认外观分别如下(win7,与上述顺序对应): 可看出,都是由一个可编辑的文本框及右端小箭头组成 QAbstractSpinBox 属性简单解释如下: Properties accelerated : ...

  3. API设计和命名

    1.前言 对于前端开发而言,肯定会和API打交道,大家也都会想过怎么设计自己的API.优秀的 API 之于代码,就如良好内涵对于每个人.好的 API 不但利于使用者理解,开发时也会事半功倍,后期维护更 ...

  4. get url img

    selenium     1● 了解selenium 这个是做 web页面测试,模拟用户测试   =====> pip install selenium 安装     2● django 用于接 ...

  5. linux nginx 添加到全局变量中(环境变量)

    ln -s /usr/local/nginx/sbin/nginx /usr/local/bin/ /usr/local/bin/就是环境变量目录

  6. Android 音视频深入 三 MP4解码播放视频 (附源码下载)

    本篇项目地址,名字是媒体解码MediaCodec,MediaExtractor,求starhttps://github.com/979451341/Audio-and-video-learning-m ...

  7. Uva LA 3177 - Beijing Guards 贪心,特例分析,判断器+二分,记录区间内状态数目来染色 难度: 3

    题目 https://icpcarchive.ecs.baylor.edu/index.php?option=com_onlinejudge&Itemid=8&page=show_pr ...

  8. sql语句最后一行显示统计。

    SELECT id, username, id_Num FROM users UNION ALL SELECT '合计', count(*), null FROM users ORDER BY id_ ...

  9. urllib python3 请求、登录、下载网页

    urllib.request 发送request和获取request的结果 urllib.error包含了urllib.request产生的异常 urllib.parse用来解析和处理Url urll ...

  10. jmeter源码导入eclipse并执行

    由于JMeter纯Java开发,界面也是基于Swing或AWT搞出来的,所以想更深层次的去了解这款工具或对于想了解JMeter插件开发或二次开发的童鞋们来说,读读JMeter的源码估计是必不可少的,所 ...