vue3动态获取dom的方法

首先是vue3获取dom的方法

<template>
  <div ref="test"></div>
</template>

<script setup>
import {onMounted, ref} from 'vue'
let test = ref(null)

onMounted(() => {
  console.log(test.value);
})
</script>

• 这样就可以拿到dom了

但是如果是通过for循环去拿到dom呢，for循环的数，刚开始没有，之后改变，生成dom，那怎么去获取dom呢

<template>
  <div ref="test">
    <div v-for="item in list">
      {{item}}
    </div>
  </div>
</template>

<script setup>
import {nextTick, onMounted, reactive, ref} from 'vue'
let test = ref(null)

onMounted(() => {
  console.log(test.value);
})

let list = reactive([])

setTimeout(() => {
  list.push(1)
  nextTick(() => {
    console.log(test.value);
  })
},1000)
</script>

• 我们可以通过nextTick去拿到更新后的dom

console.log(test.value.children[0]);

• 最后我们可以通过children方法去拿到每一个子节点的dom