Vue3_循环数组v-for中使用refs

解决方法参考来源

1. 使用背景

我在swipe循环的时候，想要获取当前所展示内容的前一个和后一个进行操作。由于vue的版本是3.0，官方文档中曾给出这样的使用实例，将被循环元素动态绑定一个方法，将所获取到的值放在数组中，代码如下：

代码简化，只展示有关内容

	



setup() {
    const myRefs = ref([]) as Ref
    const swipeRef = (el: any): any => {
      myRefs.value.push(el)
      console.log(myRefs.value, 'myRefs set')
    }
	return {
		swipeRef,
	}
}

此时会发现，内容出现重复，且每一次滑动，由于使用push方法，数量再不断增加。

2. 循环原因

为什么会产生循环呢？为了查找这个原因进行如下测试：
我有8个元素，初始加载的时候，生成40个子元素，每个元素循环了5次。
当我将元素个数改为7个，初始加载的时候生成35个子元素，每个元素循环了5次。
依次类推，发现确实是无论传入几个swipe-item，每个元素都会在初始时循环5次

因为里面还有很多内容，通过代码发现，对于这个swipe-item的其他位置也有操作，当这个元素发生变化的时候，会触发ref，其他操作不可避免，所以可以通过key数组去重的方式，在每一次对于内容更新时，赋值也赋最新的值，在感受上是一样的。

3. 解决办法

由于数组中每一个元素key都是唯一的，可以通过key值给对应内容赋值

代码简化，只展示有关内容

	



setup(){
	const myRefs = ref([]) as Ref
	return {
		myRefs,
	}
}

总结用法，希望可以帮助到你，
我是Ably，你无须超越谁，只要超越昨天的自己就好~