之前博客记录过普通 for 循环中，针对对应符合条件的元素，使用 splice 删除导致出现的问题。

众所周知，我们使用 v-for 循环 dom/ 组件，它有两个属性， item ：当前循环的每一个元素， index ：当前循环元素所对应的下标。

个人习惯，平时绑定 key 值的时候，都习惯采用如下写法，直接绑定下标:

<div v-else class="checkCavans" v-for="(item,index) in cavansArr" :key="index">
    <rd-video
        :cameraName="item.name"
        :id="item.id"
        :url="item.rtmp"
        :isFull="isFull"
        :isShowFullBtn="true"
        :isAutoPlay="false"
        :isOpenFlash="isOpenFlash"
        ref="rdVideo"
        @playerStateChange="playerStateChange"
    ></rd-video>
        src="../../../static/images/videoSurveillanceClose.png"
        alt=""
        @click="closeVideo(item)"
</div>
在图片（关闭图标）绑定的事件中，我们关闭当前的视频（销毁：数据驱动，直接改变数组即可）
 
closeVideo(currData) {
    console.log('rd: closeVideo -> item', currData);
	const index = this.cavansArr.findIndex(item => item.id === currData.id);
	this.cavansArr.splice(index, 1);
这里采取的是把当前数据当做参数传入事件中，然后通过findIndex找到数组中和当前数据id匹配的元素的下标，然后在数组中删除这条数据即可。
 
但是因为我们绑定key值采取的是index，我们这边删除元素会导致顺序错乱问题，并不会以我们期望的那样，点击第一条就会删除第一条。
 
查看vue官网对于key的介绍，最终找到了问题。
 
通俗的解释下：
 
下标在这是个临时身份，它的默认位置不会变化，如果你里面的item项移动了，那么移动的数据对应到index上，所以你的index对应的那个项就不是你想要的那个项了。
 
所以本质上 :key=index它们是同一个inedx 在不变化的前提下，一旦发生变化了，就不再是我们期望的那样了。
 
所以这也是官方不推荐使用:key="index"的原因，如果业务发生变化，你的代码就出问题了。
 
我们改造下代码，其他地方都可以不变，只需修改对于的key值即可:
 
<div v-else class="checkCavans" v-for="item in cavansArr" :key="item.id">
    <rd-video
        :cameraName="item.name"
        :id="item.id"
        :url="item.rtmp"
        :isFull="isFull"
        :isShowFullBtn="true"
        :isAutoPlay="false"
        :isOpenFlash="isOpenFlash"
        ref="rdVideo"
        @playerStateChange="playerStateChange"
    ></rd-video>
        src="../../../static/images/videoSurveillanceClose.png"
        alt=""
        @click="closeVideo(item)"
</div>
这里我们绑定循环的每一项item中的一个唯一属性id（其他属性有可能出现从重复的情况，不一定绑定id属性，绑定任何属性都可，但是不管什么属性，保证其唯一性）
 
这样我们再使用splice时就不会出现这种错乱的问题了。
                    之前博客记录过普通for循环中，针对对应符合条件的元素，使用splice删除导致出现的问题。众所周知，我们使用v-for循环dom/组件，它有两个属性，item：当前循环的每一个元素，index：当前循环元素所对应的下标。个人习惯，平时绑定key值的时候，都习惯采用如下写法，直接绑定下标:&lt;div v-else class="checkCavans" v-for="(item,index) in cavansArr" :key="index"&gt;    &lt;rd-video     
				
js for循环删除数组项（删不干净的问题）
重点在与key-=1,要让key随着被截取后数组长度的变化而变化，截取一个，key少一次。
let val = this.childData.chackNumber
      for (let a = 0; a < val.length; a++) { 
        if (val[a].chack == false) {
				
使用方法：arr.splice(arr.indexOf(ele),length):表示先获取这个数组中这个元素的下标，然后从这个下标开始计算，删除长度为length的元素
这种删除方式适用于任何js数组
&lt;template&gt;
 &lt;div class="users"&gt;
	&lt;button type="button" class="btn btn-danger" v...
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>...
				
Vue 的 `v-for` 指令可以自动侦听数组的变化并更新 DOM。Vue 实例监听的变化是基于 JavaScript 的对象观察者机制实现的，当数组发生变化时，它将触发观察者的更新过程，从而更新页面。
Vue 可以监测到以下数组方法的变化：
- `push()`: 在数组末尾添加一个或多个元素。
- `pop()`: 移除并返回数组的最后一个元素。
- `shift()`: 移除并返回数组的第一个元素。
- `unshift()`: 在数组开头添加一个或多个元素。
- `splice()`: 在任意位置添加、删除或替换元素。
- `sort()`: 对数组进行排序。
- `reverse()`: 颠倒数组中元素的顺序。
这些数组方法都会触发更新，从而重新渲染 `v-for` 所循环的元素。需要注意的是，使用 `filter()`、`concat()` 等数组方法不会触发更新，因为它们不会修改原始数组。如果需要使用这些方法，可以将其结果赋值给一个新数组，然后将其赋给响应式数据，从而触发更新。