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

vue解析ref="xxx"属性时检查你的script中有没有同名的xxx的ref，有就绑定，换句话说是检查你的setupState上有没有同名的xxx属性；
所谓setupState就是你setup() { return state }这里的return的值，
<script setup>是简写的语法糖，如果换成这样写就有值了：

export default {
    setup() {
        const divRefs = {
            "divRefs.divRef1": null,
            "divRefs.divRef2": null,
            "divRefs.divRef3": null,
        };
        // template中的ref="xxx" 中的 xxx 就是这里return 的对象中的xxx
        return divRefs;
    }
}

---

如果你有多个ref想集中在一个对象上访问，不想定义太多ref变量，你可以通过实例去访问：getCurrentInstance().refs.xxx

---

或者改成函数形式：

Answer 2

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

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

你这样写

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

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