vue3通过ref获取dom元素

先给出结论

ref获取dom的正确严谨的用法，还得看官网 模板引用 | Vue.js (vuejs.org)

写这干啥？

网上这类博客一大堆写这个干啥？NO! NO!

获取单个，自然是很容易，关键问题在于获取dom数组，网上一些博客会告诉你类似这样:ref="el=>customSetMethod(el,idx)"

const refArr = ref([])
function customSetMethod(el,idx){
    // 也许你看到的是这种
    refArr.value.push(el)
    // 也许你看到的是这种
    refArr.value[idx]=el
}

上面这些严格来说都不正确，为啥？因为 customSetMethod 在对应组件或dom元素创建和销毁的时候都会调用，同时如果是v-for中使用, 你的v-for循环的次数可能是变化的, 那么再看上面的写法还正确吗？push方式，会一直向refArr中插入，索引方式，可能也会因为循环次数的变化，导致refArr中的元素非预期。 同时，你是否有时候直接ref="refArr"发现又能自动设置进数组里？？是不是一脸黑人问号脸

那么其实我们获取dom元素数组，有两种需求情况

1. 在v-for循环中
2. 就是你可能想通过定义同名的ref，来获取到dom数组

如果v-for循环中，如果vue版本是3.2.25或以上版本，模板引用 | Vue.js (vuejs.org) 直接看官网

但是里面有句这样的话: 应该注意的是，ref 数组并不保证与源数组相同的顺序。, 额。。。额。。。暂时无法肯定这是什么意思！可能是ref数组中的dom顺序与实际html中的dom元素顺序可能会不一致？

至于定义同名ref，来获取dom数组，暂时官方没有明确的方式。你可以通过:ref=(el)=>{...}的形式实现，但得注意该方法会在每次组件更新时都被调用,元素被卸载时，函数也会被调用一次，此时的 el 参数会是 null, 感觉不太靠谱，那还是使用不同名字，然后一个个判断吧，至少结果明确。

另外，在 ts 模式下，如何在 composition api 中获取自定义组件的 el ? 或许官网也给出了答案：TypeScript 与组合式 API | Vue.js (vuejs.org)