访问模板引用

首先申明一个ref来存放元素的引用，且名称必须和模板中的ref同名。

其次，模板的引用只有在组件挂载后才能访问到，初次渲染时会是null，因此在使用时，需要考虑值为null的情况。

<template>
    <input ref="input" />
</template>

<script setup lang="ts">
import { ref, onMounted, watchEffect } from 'vue'

// 声明一个 ref 来存放该元素的引用
// 必须和模板里的 ref 同名
const input = ref<HTMLInputElement | null>(null)

onMounted(() => {
    input.value?.focus()
})

watchEffect(() => {
  if (input.value) {
    input.value.focus()
  } else {
    // 此时还未挂载，或此元素已经被卸载（例如通过 v-if 控制）
  }
})
</script>

v-for中模板的引用

在v-for中使用模板引用时，对应的 ref 中包含的值是一个数组，它将在元素被挂载后包含对应整个列表的所有元素：

<template>
    <div v-for="i in 10" :key="i" ref="itemRefs">
        {{ i }}
    </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'

// ref数组与源数组顺序并不一定相同
const itemRefs = ref<Array<HTMLElement>>([]);
onMounted(() => console.log(itemRefs.value))
</script>