戳上方“执行上下文”，选择“置顶公众号”
关键时刻，第一时间送达！
<div @click="down"> 下载</div>
<template v-for="(list, index) in data" :key="list.id">
<MapArea
ref="refMaps"
:data="dataList">
</MapArea>
</template>
const refMaps = ref([])
funciton down() {
console.log(refMaps.value)
}
十分的奇怪。
而且只要切换后。打印的dom顺序就一直保持颠倒的状态不会改变。
寻找解决方案。
1、第一种想到的是因为异步数据加载导致dom更新的顺序变了。但是很快被否了，因为点击打印的操作已经在 dom 更新结束。
2、使用 nextTick
funciton down() {
nexttick(() => {
console.log(refMaps.value)
})
}
发现其实没有啥用。因为dom 已经更新结束。
3、使用js的原生方法。
// 获取单个具有指定 class 的元素
const singleElement = document.querySelector('.my-class');
// 如果需要获取所有具有指定 class 的元素，可以使用 querySelectorAll
const allElements = document.querySelectorAll('.my-class');
// 然后可以对获取到的元素进行操作
if (singleElement) {
console.log('Found single element:', singleElement);
// 对 singleElement 进行操作...
}
if (allElements.length > 0) {
console.log('Found multiple elements:', allElements);
// 遍历 allElements 进行操作...
allElements.forEach((el) => {
// 对每个 el 进行操作...
});
}
4、将 ref的赋值从默认改为动态赋值。
# 原来的
<MapArea
ref="refMaps"
:data="dataList">
</MapArea>
# 改变后
<MapArea
:ref="(el) => setItemRef(el, index)"
:data="dataList">
</MapArea>
let itemRefs = []
const setItemRef = (el, index) => {
if (el) {
itemRefs[index] = (el)
}
}
ref 来引用 DOM 元素并遍历节点数组时，返回的节点顺序可能与在浏览器中渲染的顺序相反。这可能是因为 Vue3 在渲染和更新 DOM 时使用了虚拟 DOM 和响应式系统的机制。