[油猴脚本开发指南]循环Key的作用
# 前文如果你看了之前的循环控制，相信大概了解了循环，但是为什么一定要加key？不加不可以么？
我们可以从本篇的代码以及接下来的理论课来学习一二
由于接下来的理论和概念会越来越复杂
所以会分为必看和非必看，如果为非必看
代表记忆知识点即可，没有能力的无需看本篇。
# 代码
```javascript
// ==UserScript==
// @name 修改Vue3
// @namespace http://tampermonkey.net/
// @version 0.1
// @descriptiontry to take over the world!
// @author You
// @match https://bbs.tampermonkey.net.cn/forum.php
// @icon https://www.google.com/s2/favicons?domain=tampermonkey.net.cn
// @require https://raw.githubusercontent.com/lihengdao666/Modify-Tampermonkey-Libs/master/vue.js
// @grant unsafeWindow
// @grant GM_getResourceText
// @grant GM_addStyle
// ==/UserScript==
let text=`<div id="app" style="position: absolute;top: 50vh;left: 50vw;background: #fb7d7d;padding:10px;">
<div>
<button@click='ChangeCheck'>ChangeCheck</button>
</div>
<div v-for='(item,index) in setlist'>
<input type="checkbox"/> {{item}}
</div>
</div>`
var el=document.createElement('div')
el.innerHTML=text;
document.body.append(el)
const Counter = {
data() {
return {
setlist:['张三','李四','王二麻子'],
}
},
methods:{
ChangeCheck(){
this.setlist=['王二麻子','李四','张三']
},
}
}
const app = Vue.createApp(Counter);
app.mount("#app");
```
这里其实非常简单，setlist是张三李四王二麻子，如果我们点击了，就切换一下，这里我没有设置key
我们来看一下执行情况。
初始化是这样的
我们勾选一下张三
点击切换
可以看到虽然名字变了，但是选择的选项依然没有跟随改变
这时候要出问题的。
# 产生原因
Vue在进行队列的绘制的时候，如果我们不对每个循环设置唯一的key元素，那就会认定为相同的元素
一旦判定为相同的元素，vue不会再进行移动等操作，而是会原地对文本进行替换。
这里因为我们没有设置key
旧的项为张三，新的项为王二麻子
而没有key即判定王二麻子和张三是一个概念上的相等的元素
这时候就会简单的把张三替换为王二麻子，导致选中项没有跟随。
# 如何解决
那你可能要想，我设置key不就行了么？
这时候我写上key
将key设置为index
再进行测试一下
发现依然会出现这种情况！
为什么？
因为旧的情况下张三的key1 而新的情况下王二麻子的key1
这两个元素依然是相等的！
那我有什么好的解决方案
1.将字符串改为对象，设置一个一定唯一的id。
2.设置该字符串为key(不推荐，因为是中文，Vue对中文的兼容性个人认为不是那么的好)
这里我投机取巧一下
设置了字符串为key
经过测试，设置了key为中文字符后，Vue挪动了元素
因为这时候比对张三的key是张三，而王二麻子的key为王二麻子
两个并不是相同的元素，所以会进行挪动，而不是原地赋值。
# 结语
那么我们就学习了vue的列表绘制的key的作用，概念相对还是较为难以理解的
但是相信如果你一章一章看下来
真的会有很大的收获
撒花~
页:
[1]