vue3.5新特性——useTemplateRef

这个特性解决了在 Vue 中获取模板内子组件或 DOM 元素时，使用字符串 ref 带来的一些不便。

问题回顾（旧方法）

在 Vue 中，如果要在父组件中获取子组件或 DOM 元素，我们通常使用 ref。

旧方法示例：

<template>
  <ChildComponent ref="childRef" />
</template>

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

// 1. 声明一个 ref，名字必须与模板中的 ref 字符串一致
const childRef = ref(null)

onMounted(() => {
  // 2. 在 mounted 之后才能访问
  console.log(childRef.value) // 子组件实例
})
</script>

旧方法的问题：

1. 字符串名字必须一致 ：模板中的 ref="childRef" 必须与脚本中声明的 const childRef 变量名一致。这看起来像是一种"魔法"字符串关联，不够直观。
2. 不符合直觉的思维模式：我们更习惯的方式是"在模板中定义 ID，在脚本中用方法通过 ID 去获取"。而旧方法要求我们先在脚本中定义变量，然后在模板中用字符串绑定，顺序和关联方式都显得有些别扭。
3. 类型支持不友好 ：默认情况下，childRef.value 的类型是 null 或组件实例，需要手动标注类型才能获得更好的 TypeScript 支持。

解决方案：Vue 3.5 的 useTemplateRef

Vue 3.5 引入了 useTemplateRef 函数，它提供了一种更符合直觉、类型安全的方式来获取模板内的引用。

新方法示例：

<template>
  <ChildComponent :ref="childRef" />
  <!-- 或者 -->
  <h1 :ref="h1Ref">Hello</h1>
</template>

<script setup>
import { useTemplateRef } from 'vue'
import ChildComponent from './ChildComponent.vue'

// 1. 使用 useTemplateRef 创建一个 ref
//    变量名可以任意定义，不需要与模板中的字符串对应
const childRef = useTemplateRef('childRef')
const h1Ref = useTemplateRef('h1Ref')

// 2. 在 onMounted 或 watchEffect 中访问
import { onMounted } from 'vue'

onMounted(() => {
  console.log(childRef.value) // 子组件实例，类型自动推断
  console.log(h1Ref.value)    // HTMLHeadingElement，类型自动推断
})
</script>

新方法的优势

1. 符合直觉 ：更像是"先定义获取方法，然后在模板中绑定"。你调用 useTemplateRef 并传入一个 key，然后在模板中通过 :ref="..." 绑定这个返回的 ref 函数。
2. 解耦字符串与变量名 ：useTemplateRef('childRef') 中的字符串 'childRef' 是一个唯一的 key，它与变量的命名无关。你可以将返回值赋给任意变量，例如 const myChild = useTemplateRef('someKey')。
3. 优秀的类型支持 ：
   • useTemplateRef 返回的 ref 对象具有更精确的类型推断。
   • 如果引用的是一个 HTML 元素，它会自动推断出具体的元素类型（如 HTMLHeadingElement）。
   • 如果引用的是一个 Vue 组件，它会自动推断出该组件的实例类型。

总结

useTemplateRef 是 Vue 3.5 中一个非常实用的新特性，它改善了在 Composition API 中获取模板引用的开发体验，使其更加符合直觉、类型安全，并减少了"魔法字符串"带来的困扰。如果您在 Vue 3.5 或更高版本中开发，建议尝试使用这个新特性。