Vue3组合式API-模版引用示例（获取DOM对象）

• 模版引用是指通过ref标识获取真实的DOM对象或者组件实例对象
• 只可以在组件挂载后才能访问模板引用

示例：
App.vue文件：

<script setup>
import { onMounted, ref } from 'vue'

// 声明一个 ref 来存放该元素的引用
// 必须和模板里的 ref 属性的值同名
const h1Ref = ref(null)

// 组件挂载完毕之后才能获取，所以在onMounted函数内部打印h1Ref的值看看
// onMounted函数在组件挂载完成后执行
onMounted(() => {
  console.log(h1Ref.value)
})
</script>

<template>
  <!-- 通过ref属性绑定ref对象 -->
  <!-- 此处h1标签绑定了h1Ref这个对象 -->
  <h1 ref="h1Ref">hello Vue3!</h1>
</template>

<style scoped></style>

到浏览器中查看效果，开发者工具的控制台打印出了信息：