vue3中ref绑定的节点顺序错乱

news2024/9/22 10:03:43

问题复现

在这里插入图片描述

眨眼睛这个是修正过了的，小友的应该是ref直接绑定navigationTextList对吧，
按正常想法肯定是既然这个数组会动态更新，我只需要index不就能确定是哪个节点啦，倘若只是静态数据应该不会有什么问题，
⚠️但如果出现切换一整个数组数据等操作可就该出问题了，当然了没问题的小友应该也不会看这篇博客🤣🤣🤣

我们这里简略阐述一下出现这种情况的原因，因为vue的ref是不保证其中Dom数组的顺序的，因为vue的渲染顺序与我们所需的会有偏差，至于具体原因咱不得而知，知道的大佬可以私信或留言让眨眼睛涨涨知识，总结一下问题就是出现在默认顺序不一定按照我们循环渲染的顺序来

解决方法

既然默认顺序不一定按照循环渲染顺序来，那我们手写一下ref的节点绑定呗，拿到当前节点与下标，手动将这个节点绑定在这个下标对应的数组元素上不就行了

关键代码内容：

//导航文本Dom组
let navigationTextList = ref([])

//手动设置导航文本DOM防止默认乱序
const setNavItemRef = (el, index) => {
    if (el) {
        navigationTextList.value[index] = (el)
    }
}

   //主要就是`:ref="(el) => setNavItemRef(el, index)"`这句
   <div class="truncate  text-center  font-[550]" @mouseover="checkNavigationTextOverflow(index)"
        :ref="(el) => setNavItemRef(el, index)">{{ item.name }}</div>