在Vue2中，我们通常这么做实现一个模板引用：

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

<script>
export default {
  data() {},
  methods: {
    focusInput() {
      this.$refs.input.focus();
    }
  },
  mounted() {
    this.focusInput();
  }
}
</script>

官方文档：https://v3.cn.vuejs.org/guide/component-template-refs.html

在 Vue3 中使用组合式API，官方在 setup() API 中解释说：

在 setup() 内部，this 不是该活跃实例的引用，因为 setup() 是在解析其它组件选项之前被调用的，所以 setup() 内部的 this 的行为与其它选项中的 this 完全不同。这使得 setup() 在和其它选项式 API 一起使用时可能会导致混淆。

所以我们没有办法通过 this.$refs 获取模板引用。那应该怎么办呢？

在 Vue3 依旧可以在组件实例上找到 $refs：

import { getCurrentInstance } from 'vue';

// 获取当前组件实例
const vm = getCurrentInstance();
// 找到 $refs
setTimeout(() => {
  console.log(vm.ctx.$refs);
}, 0);

注意！

因为 setup() 运行时，组件并未初始化完成，所以 $refs 是空的。所以上面代码将放在了延后执行的 setTimeout 中。