昨天做类似点击单选功能时遇到了点坑，简单记录下
先来看下需求，如下图我需要点击其中一个意见就改变其中一个dom元素的背景颜色，而再次点击其他意见时原来的选中状态要回退回未选中的状态
先通过遍历渲染出几个dom节点，我这里通过传递给id不同index来方便下面获取dom
<div
v-for="(item, index) in usedAdviceList"
style="width: 100%"
:key="index"
class="content-tag"
:id="adviceId(index)"
@mousedown="mouseDown(item,index)"
@click="chooseAdvice(item)"
>
{{ item.content }}
</div>
然后鼠标点击就触发事件（错误代码）
for(let i in this.usedAdviceList.length){
let dom = document.getElementById("usedAdvice"+i);
index===i?dom.style.backgroundColor = "#e0e0e0":dom.style.backgroundColor = "#f1f1f1";
}
然后点击后不起效果，于是百度后发现这是for in 自带的坑
然后列出for in中的几个坑和造成原因
1).index索引为字符串型数字，不能直接进行几何运算。
2).遍历顺序有可能不是按照实际数组的内部顺序。
3).使用for in会遍历数组所有的可枚举属性，包括原型。例如上栗的原型方法method和name属性。
解决方法：
第一种方法（最简单）
上图中我们直接把for in 改成普通for 循环即可运行
for(var i=0;i<this.usedAdviceList.length;i++){
let dom = document.getElementById("usedAdvice"+i);
index===i?dom.style.backgroundColor = "#e0e0e0":dom.style.backgroundColor = "#f1f1f1";
}
这里我想说的是第二和第三种方法可以用在很多类似的数据改变而dom层无法即使更新的问题上，这里面涉及到js单线程运行机制和代码执行和dom渲染的执行顺序问题，对于里面的详细任务队列等等大家可以深入学习学习，我也不是很了解，还需要大量的学习
第二种方法（较简单）
还是用for in，但是在外面套一层nextTick（）函数，这个函数的作用大概就是数据改变后即刻更新渲染dom元素，详细的话这里就不多说了
this.$nextTick(()=>{
for(let i in this.usedAdviceList.length){
let dom = document.getElementById("usedAdvice"+i);
index===i?dom.style.backgroundColor = "#e0e0e0":dom.style.backgroundColor = "#f1f1f1";
}
})
第三种方法
利用setTimeout函数让此条数据改变后的dom更新后再进行一下轮循环
1.mouseDown中的index是鼠标事件传过来的当前选中的索引值，先传进loop中用const进行保存
2.然后在mouseDown中定义一个i变量为0，再传入loop中,（如果在loop中定义i=0的话，这样每次调用loop就会重置i为0）
3.loop函数中先操纵改变dom节点，然后i++，设置setTimeout等待本次循环执行完再重新调用loop
mouseDown(v,index) {
var that = this;
let currentDom = document.getElementById("usedAdvice"+index);
let i = 0;
this.loop(index,i);
},
loop(index,i){
const currentIndex = index;
let dom = document.getElementById("usedAdvice"+i);
currentIndex===i?dom.style.backgroundColor = "#e0e0e0":dom.style.backgroundColor = "#f1f1f1";
i++;
i<this.usedAdviceList.length?setTimeout(this.loop(currentIndex,i),1000):"";
return ""
},
然后以上就是本次遇到的坑的问题和解决方法，还有很多不是很理解和不清楚的地方，如果有问题的话希望大佬们可以提出来
