成都手机网站建设哪,typecodes wordpress,介绍西安网页设计,wordpress 实名一、为什么要用key#xff1f;
key可以标识列表中每个元素的唯一性#xff0c;方便Vue高效地更新虚拟DOM#xff1b;key主要用于dom diff算法#xff0c;diff算法是同级比较#xff0c;比较当前标签上的key和标签名#xff0c;如果都一样#xff0c;就只移动元素#…一、为什么要用key
key可以标识列表中每个元素的唯一性方便Vue高效地更新虚拟DOMkey主要用于dom diff算法diff算法是同级比较比较当前标签上的key和标签名如果都一样就只移动元素不会重新创建和删除如果没有keyVue会使用“就地复用”策略如果数据项的顺序改变Vue不会移动DOM元素来匹配数据项的改变而是简单复用原来位置的每个元素。
templatediv classaboutulli v-for(item, index) in cityListsinput typecheckbox :valueitem.city /{{ item.city }}/libutton clickremove删除/button/ul/div
/templatescript
export default {data() {return {cityLists: [{ id: 1, city: 深圳 },{ id: 2, city: 广州 },{ id: 3, city: 东莞 },],};},methods: {remove() {//注意这里是shift 如果做添加unshift也是同样的问题this.cityLists.shift();},},
};
/script 如上代码和运行展示勾选了“深圳”点击删除的话 有key且key不是index的话就可以把“深圳 ”和选中的标识删掉。这里没有正确的设置key因为标签名都是input“广州”就直接上去复用了“深圳”的位置还把人家勾选的标识都复用了。 选中了“东莞”点击删除第一个“深圳”“东莞”的选中标识没了就是“广州”和“东莞”往上复用了位置。
二、为什么尽量不要使用索引值index作为key
要是key用index的话运行展示就会和上面的一样因为index会随着数据的增删而改变导致key失效。最好使用数据中的唯一标识如id等这样当数组发生变化时就可以根据key来正确地更新和移动对应的元素而不是重新渲染整个列表。
