你的 Vue 3 常量与变量，VuReact 会优化成什么样的 React？

VuReact 是一个能将 Vue 3 代码编译为标准、可维护 React 代码的工具。今天就带大家直击核心：Vue 中的顶层常量静态与普通变量，通过 VuReact 的提升与自动依赖分析后会变成什么样的 React 代码？

前置约定

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

1. 文中 Vue / React 代码均为核心逻辑简写，省略完整组件包裹、无关配置等内容；
2. 默认读者已熟悉 Vue 3 中顶层const声明与函数/变量优化的语义。

编译对照

Vue 顶层常量 const → React 组件外部静态提升

在 Vue 中，<script setup>顶层的常量声明常用于组件的静态配置、默认值等。VuReact 会对这些常量进行静态分析：若初始值为简单字面量（如字符串、数字、布尔值等），则会被提升至组件外部，避免每次渲染重新创建。

• Vue 代码：

<scriptsetuplang="ts">constdefaultValue=1;constisEnabled=true;</script>

• VuReact 编译后 React 代码：

constdefaultValue=1;constisEnabled=true;constComp=memo(()=>{return<></>;});

从示例可以看到：对于值为简单数据类型的顶层常量，VuReact 会将其提升为组件外部，避免 React 组件每次渲染时重复初始化。

Vue 顶层变量声明 → React useMemo 自动依赖分析

顶层变量如果由表达式计算得到，且存在响应式依赖，VuReact 会将其编译为useMemo，并自动补齐依赖数组。对纯静态表达式则保持原样，不会强制包装。

• Vue 代码：

<scriptsetuplang="ts">constcount=ref(0);conststate=reactive({foo:'bar',bar:{c:1}});constmemoizedObj={title:'test',bar:count.value,add:()=>{state.bar.c++;},};conststaticObj={foo:1,state:{bar:{c:1}},};constreactiveList=[count.value,1,2];</script>

• VuReact 编译后 React 代码：

constcount=useVRef(0);conststate=useReactive({foo:'bar',bar:{c:1}});constmemoizedObj=useMemo(()=>({title:'test',bar:count.value,add:()=>{state.bar.c++;},}),[count.value,state.bar.c],);conststaticObj={foo:1,state:{bar:{c:1},},};constreactiveList=useMemo(()=>[count.value,1,2],[count.value]);

此处说明：

• memoizedObj因为依赖count.value和state.bar.c，被自动编译为useMemo；
• staticObj不含响应式依赖，保持为普通静态对象；
• reactiveList则根据依赖自动补齐useMemo的依赖数组。

🔗 相关资源

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

📖 继续阅读

• 上一篇：useTemplateRef
• 下一篇：顶层箭头函数的优化

-()–

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