vue3 div 绑定 ref 问题？

Question

vue3 div 绑定 ref 正常是这样的：

<script setup>import {ref} from "vue";const divRef1 = ref(null)const divRef2 = ref(null)const divRef3 = ref(null)</script><template>    <div ref="divRef1"></div>    <div ref="divRef2"></div>    <div ref="divRef3"></div></template><style scoped></style>

这样的怎么不可以：

<script setup>import {ref} from "vue";const divRefs = ref({    divRef1: null,    divRef2: null,    divRef3: null,})</script><template>    <div ref="divRefs.divRef1"></div>    <div ref="divRefs.divRef2"></div>    <div ref="divRefs.divRef3"></div></template><style scoped></style>

Answer 1

可以这样理解，元素绑定的ref,相当于抛出了一个引用

{    divRefs.divRef1: dom1,    divRefs.divRef2: dom2,    divRefs.divRef3: dom3}

你这样写

const divRefs = ref({    divRef1: null,    divRef2: null,    divRef3: null,})

这个值是一个对象了，vue3并不会处理这样的，所以是不可以的。