Vue2与Vue3中Ref绑定元素方式

<template>
    <!-- 单个绑定 -->
  <HelloWorld ref="HelloRef" />
  <!-- 循环绑定 -->
  <div v-for="item in arr" :key="item">
    <hello-world ref="HelloArrRef"></hello-world>
  </div>
</template>

<script>
import HelloWorld from "./components/HelloWorld.vue";
export default {
  name: "App",
  components: {
    HelloWorld,
  },
  data() {
    return {
      count:0
    };
  },
  mounted() {
    console.log(this.$refs.HelloRef, "HelloRef");//结果为单个对象
    console.log(this.$refs.HelloArrRef, "HelloArrRef");// 结果为数组 
  },
  methods: {
  },
};

<template>
  <!-- 单个绑定 -->
  <HelloWorld ref="HelloRef" />
  <!-- 循环绑定 -->
  <div v-for="item in arr" :key="item">
    <hello-world :ref="setItemRef"></hello-world>
  </div>
</template>

<script>
import HelloWorld from "./components/HelloWorld.vue";
import { defineComponent, onMounted,onBeforeUpdate,onUpdated, ref } from "vue";

export default defineComponent({
  name: "App",
  components: {
    HelloWorld,
  },
  setup() {
    const HelloRef = ref(null);
    const arr = ref([1, 2, 3]);
    const HelloRefArr = ref([]);
    const setItemRef = (el) => {
      if (el) {
        HelloRefArr.value.push(el);
      }
    };
     onMounted(() => {
      console.log(HelloRef.value, "HelloRef");
      console.log(HelloRefArr.value, "HelloRefArr");
    });
    onBeforeUpdate(() => {
      HelloRefArr.value = []
    })
    onUpdated(() => {
      console.log(HelloRefArr.value,' HelloRefArr.value--update')
    })
    return {
      HelloRef,
      arr,
      setItemRef,
      HelloRefArr,
    };
  },
});
</script>