你的 Vue 3 useTemplateRef()，VuReact 会编译成什么样的 React？

VuReact 是一个能将 Vue 3 代码编译为标准、可维护 React 代码的工具。今天就带大家直击核心：Vue 中常见的 useTemplateRef API 经过 VuReact 编译后会变成什么样的 React 代码？

前置约定

为避免示例代码冗余导致理解偏差，先明确两个小约定：

1. 文中 Vue / React 代码均为核心逻辑简写，省略完整组件包裹、无关配置等内容；
2. 默认读者已熟悉 Vue 3 中 useTemplateRef 的 API 用法与核心行为。

编译对照

Vue useTemplateRef → React useRef + .current

useTemplateRef 是 Vue 3 中用于获取模板 ref 节点的 API，它在 React 中没有直接对应的运行时实现，但语义上等价于 React 的 useRef。VuReact 会将其编译为 useRef 并将 .value 访问替换为 .current。

• Vue 代码：

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

  const pRef = useTemplateRef<HTMLParagraphElement>('p');

  onMounted(() => {
    console.log(pRef.value.offsetWidth);
  });
</script>

• VuReact 编译后 React 代码：

import { useMounted, useRef } from 'react';

const pRef = useRef<HTMLParagraphElement | null>(null);

useMounted(() => {
  console.log(pRef.current?.offsetWidth);
});

从示例可以看到：Vue 的 useTemplateRef() 被翻译为 React 的 useRef。VuReact 会将模板 ref 的类型保留，并将其访问方式从 pRef.value 转为 pRef.current，保持模板引用语义一致。

---

Vue 模板中的 useTemplateRef → React ref 绑定

在 Vue 模板中使用 ref 引用 DOM 节点时，VuReact 会把它编译为 React 的 ref 绑定方式。

• Vue 代码：

<template>
  <p ref="pRef">Hello</p>
</template>

<script setup lang="ts">
  import { useTemplateRef } from 'vue';

  const pRef = useTemplateRef<HTMLParagraphElement>('p');
</script>

• VuReact 编译后 React 代码：

import { useRef } from 'react';

const pRef = useRef<HTMLParagraphElement | null>(null);

return <p ref={pRef}>Hello</p>;

VuReact 会把 Vue 模板中的 ref 绑定转换为 React 的 ref={pRef} 形式，并保持类型与访问方式的一致性。

🔗 相关资源

• VuReact 官方文档：vureact.top
• VuReact Runtime 文档：runtime.vureact.top

---

✨ 如果你觉得本文对你理解 VuReact 有帮助，欢迎点赞、收藏、关注！