[Vue]如何使用 Vue3 的模板引用？

在 Vue3 组合式 API 中，setup 函数在组件实例化之前执行，所以无法访问到组件实例化之后的 $refs 属性，也就是无法获取组件实例 this。

官方文档给出的获取组件实例方法 getCurrentInstance，它只适合于开发环境中，打包上线之后无法获取到组件实例 this。

在使用组合式 API 时，响应式引用和模板引用的概念是统一的，即通过 ref() 来获取组件节点。

<template>
    <audio ref="audio" />
</template>

<script lang="ts">
import { defineComponent, ref, Ref } from 'vue'

export default defineComponent({
  name: 'Demo',
  setup() {
    let audio: Ref<any>
    audio = ref(null)
    return { audio }
  }
})
</script>

注意：在节点中声明的 ref 名称必须与 setup 函数内的变量名称保持一致；若你使用的是 TS，你必须要为变量指示类型为 any。