vue for循环创建div，如何获得第一个div的对象

在 Vue 中使用 for 循环创建 div 时，可以使用 ref 来获取第一个 div 的对象。

举个例子：

<template>
  <div>
    <div ref="divs" v-for="(item, index) in items" :key="index">{{ item }}</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [1, 2, 3]
    }
  },
  mounted() {
    console.log(this.$refs.divs[0])
  }
}
</script>

在上面的代码中，使用 ref 给所有 div 设置了名为 "divs" 的 ref，然后在 mounted 钩子函数中通过 `this.$refs.divs[0]` 就能获取到第一个 div 的对象。

你还可以使用 $nextTick 方法来等待 DOM 更新后再获取 ref：

this.$nextTick(() => {
  console.log(this.$refs.divs[0])
})

但是，有时候可能会出现获取到的 ref 是 undefined 的情况，这时候就需要在 $nextTick 里使用 try/catch 来捕获错误。

this.$nextTick(() => {
  try {
    console.log(this.$refs.divs[0])
  } catch (error) {
    console.error(error)
  }
})