VueJS之v

翻领折法之二：V字折法，将领子尖角对齐胸口中央，形成V形折痕，保持自然 #生活技巧# #衣物护理建议# #衬衫翻领折法#

Vue 中应如何合理使用key值

在开发中经常会碰到使用 v-for的用法,例如现有数组
var array=[{name:’张三’,age:21},{name:’李四’,age:39},{name:’王五’,age:40}];
使用列表对此数据渲染如下

<ul> <li v-for="person in array" :key="Math.random()" > 名称:<input v-model='person.name' /> </li> </ul>1234567

代码这么写,咋一看没什么问题,但是实际用的时候会发现每次输入一次后数据就会发生改变,然后输入框就会失去焦点。于是采取 v-model.lazy的方式,代码如下

<ul> <li v-for="person in array" :key="Math.random()" > 名称:<input v-model.lazy='person.name' /> </li> </ul>1234567

这样数据不会事实更新,不会出现一输入就失去焦点的现象。但是引发一个问题，使用tab切换时无法定位到下一个输入框。于是这样改写：

<ul> <li v-for="(person,index) in array" :key="Math.random()" > 名称:<input ref="'li-person-'+index" id="'li-person-'+index" v-model.lazy='person.name' @focus='focusEvent' /> </li> </ul> <script> export default{ methods:{ focusEvent(event){ var target = event.srcElement; this.$nextTick(()=>{ let id = target.getAttribute("id"); if(id){ let ta = this.$refs[id][0]; if(ta) ta.focus(); } }) } } } </scirpt>

123456789101112131415161718192021222324

这样能解决数据改变时切换tab无法获取正确焦点的问题,但是使用element组件el-select依然无法获取焦点。因此对齐blur事件监听,处理与 focus类似,也是通过id找到对应的element,使其获取焦点。此处有一个小坑，就是不能直接通过target获取 元素,因为数据变动时这个element已经不存在了,故对其使用focus()会报错,因此必须在nextTick中获取该节点。但是，此处只能解决焦点问题，真正数据刷新后dom重新渲染失去焦点的解决方案还是没找到。
经过一系列采坑及查找资料

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 内容非常简单，或者是刻意依赖默认行为以获取性能上的提升。1234567891011

此处是摘取官网上的一段解释,通俗点来讲,就是一个列表项要有一个key值,这个key值如果唯一且未发生变化,则dom就会被复用,反之则需要重新生成。这段话解释了为什么我每次改变数据都会失去焦点的根本原因，因为我的key值是随机的，虽然是唯一的，但是在数据变动时就会被认为是另外一个元素，会被重新渲染，输入框也会被先移除再被添加上，因此，代码改为如下

<ul> <li v-for="(person,index) in array" :key="'person'+index" > 名称:<input ref="'li-person-'+index" id="'li-person-'+index" v-model.lazy='person.name' @focus='focusEvent' /> </li> </ul>1234567

问题解决。
在实际中，我使用的远比这个例子复杂，是套用了两层v-for，但是实际原理是一致的。故做此记录

网址：VueJS之v https://www.yuejiaxmz.com/news/view/182765

相关内容

V
节日快乐=v=
哑铃V字形向上
温度为T时，在两个起始容积都为1L的恒温密闭容器发生反应：H2(g)+I2(g) 2HI(g) ΔH＜0。实验测得：v正＝v(H2)消耗＝v(I2)消耗＝k正c(H2)·c(I2)，v逆＝v(HI)消耗＝k逆c2 (HI)，
2025款奔驰V级平行进口四驱商务四座开往财富之路
小v智能语音助手下载
deHub 缝隙刷地缝刷V字浴室洗墙刷瓷砖清洁V型缝隙刷刷墙神器浴室清洁刷 12.8元
大V8是亮点 凯迪拉克纽约车展发布CT6 V
几个可以自行操作的保养小技巧，哪吒V车主请收藏！
七大瘦脸方法，圆你V脸梦

随便看看