vue3-- setup中获取数组dom

<template>
  <ul>
    <li v-for="(item, index) in arr"
        :key="index"
        :ref="el => setRef[index] = el">
      {{ item }}
    </li>
  </ul>
  <div ref="single">我是单个dom</div>
</template>

<script>
import { ref, nextTick,  onMounted,onBeforeUpdate,onUpdated } from 'vue'
export default {
  name: 'nnnn',
  components: {},
  computed: {},
  watch: {
    curData(newValue) {
      console.log(newValue)
      this.$nextTick(() => {
        this.moveFun(newValue)
      })
    },
  },
  methods: {
      changeMsg() {
      this.$nextTick(() => {
        // this.msg2 = this.$refs.msgDiv.innerHTML
      })
    }
  },
  setup() {
    const arr = ref([1, 2, 3]) //测试数据
    const setRef = ref([]) // 存储dom数组。// 初始值变量名一定要和模版中的ref一致，比如此处为 setRef
    const single = ref(null) //初始值需要赋值为空，或者null，初始值变量名一定要和模版中的ref一致，比如此处为 single

    const moveFun = () => {
      nextTick(() => {
        console.log('[[[[[[[]]]]]]]', setRef.value)
      })
    }

    nextTick(() => {
     console.log('循环dom----',setRef.value) //数组渲染后输出Proxy{0: li, 1: li, 2: li}
     console.log('循环dom第一个----',setRef.value[0])
     console.log('循环dom最后一个----',setRef.value[setRef.value.length-1])

     console.log('单个dom----',single.value)
    })

    onMounted(() => { //dom渲染完后 执行

    })
    onBeforeUpdate(() => {    })    
    onUpdated(() => {    })  
    return {
      arr,
      setRef,
      moveFun,
    }
  },
}
</script>

<style lang="scss">
</style>