Vue key的作用
来源:互联网 发布:ff14暗之战士捏脸数据 编辑:程序博客网 时间:2024/06/18 15:59
1、v-if中用 key 管理可复用的元素
Vue 会尽可能高效地渲染元素,通常会复用已有元素而不是从头开始渲染。这么做,除了使 Vue 变得非常快之外,还有一些有用的好处。例如,如果你允许用户在不同的登录方式之间切换:
<template v-if="loginType === 'username'"> <label>Username</label> <input placeholder="Enter your username"></template><template v-else> <label>Email</label> <input placeholder="Enter your email address"></template>那么在上面的代码中切换 loginType 将不会清除用户已经输入的内容。因为两个模版使用了相同的元素,<input> 不会被替换掉——仅仅是替换了它的 placeholder。
这样也不总是符合实际需求,所以 Vue 为你提供了一种方式来声明“这两个元素是完全独立的——不要复用它们”。只需添加一个具有唯一值的 key 属性即可:
<template v-if="loginType === 'username'"> <label>Username</label> <input placeholder="Enter your username" key="username-input"></template><template v-else> <label>Email</label> <input placeholder="Enter your email address" key="email-input"></template>现在,每次切换时,输入框都将被重新渲染。注意, <label> 元素仍然会被高效地复用,因为它们没有添加 key 属性
2、v-for中的key
当 Vue.js 用 v-for 正在更新已渲染过的元素列表时,它默认用 “就地复用” 策略。如果数据项的顺序被改变,Vue将不是移动 DOM 元素来匹配数据项的顺序, 而是简单复用此处每个元素,并且确保它在特定索引下显示已被渲染过的每个元素。这个类似 Vue 1.x 的 track-by="$index" 。
这个默认的模式是有效的,但是只适用于不依赖子组件状态或临时 DOM 状态(例如:表单输入值)的列表渲染输出。
为了给 Vue 一个提示,以便它能跟踪每个节点的身份,从而重用和重新排序现有元素,你需要为每项提供一个唯一 key 属性。理想的 key 值是每项都有唯一 id。这个特殊的属性相当于 Vue 1.x 的 track-by ,但它的工作方式类似于一个属性,所以你需要用 v-bind 来绑定动态值(在这里使用简写):
<div v-for="item in items" :key="item.id"> <!-- 内容 --></div>建议尽可能使用 v-for 来提供 key ,除非迭代 DOM 内容足够简单,或者你是故意要依赖于默认行为来获得性能提升。因为它是 Vue 识别节点的一个通用机制, key 并不特别与 v-for 关联,key 还具有其他用途,我们将在后面的指南中看到其他用途。
阅读全文
0 1
- Vue key的作用
- Vue key的作用
- vue-router、vue-loader、vue-cli的作用
- vue keep-alive的作用
- vue,keep-alive的作用
- SQL中primary key的作用
- 小程序wx:key的作用
- vue组件中$emit()的作用
- vue关于nextTick方法的作用
- React-Native中Array渲染的key的作用
- vue中$nextTick()作用
- OAF中Application Short Name 和Responsibility Key的作用
- primary key 与 unique 约束的区别与作用
- react native key,ref,bind的作用和使用
- vue中的ref作用,可以实现DOM的联动操作
- Vue.js的组件分发 之 作用域槽
- 通过vue-cli工具生成的vue项目中各文件的作用
- vue-cli 接口返回数据key为id 不能被iview的表格渲染,关键字id冲突,更改key值
- vtk设置actor颜色问题
- 目标跟踪算法小结(三)
- HibernateⅠ 入门
- 链栈学习及运用笔记
- linux环境下导出导入oracle的dmp文件。(exp,imp)
- Vue key的作用
- Makefile文件编写
- Java数组
- 集合
- 计算机常用算法对照表整理
- hibernate一级缓存,二级缓存,查询缓存
- python组合数据类型--列表
- linux定时任务的设置
- mysql主从同步(4)-Slave延迟状态监控