uni-app 微信小程序运行时template内无法获取到<script setup>写法内定义的const常量

开发环境	版本号	项目创建方式
Windows	Windows 11 家庭中文版 23H2	HBuilderX

操作步骤：

<script setup lang="ts">
const a = 1;
</script>  
<template>
<view>{{a}}</view>
</template>

微信小程序中template无法读取到a的值

预期结果：

正常读取渲染a

实际结果：

渲染的a为空

bug描述：

<script setup lang="ts">
const a = 1;
</script>  
<template>
<view>{{a}}</view>
</template>

微信小程序中template无法读取到a的值

itying888 1楼•1 天前

试了Hbuilder X3.98编译后正常，4.08就无法在template中读取常量了，微信小程序和支付宝小程序都有这个问题

h691938207 2楼•1 天前

新创建空白项目的测试代码

yibo5220 3楼•1 天前

浏览器环境下是正常的

bupafengyu 4楼•1 天前

@DCloud_UNI_Anne @DCloud_UNI_CHB 两位看下

yuanlaile 5楼•1 天前

加ref，const a = ref(1);

sinazl 6楼•1 天前

但是我只想声明一个普通的常量的情况下无法在template中获取，目前我也是先进行了ref包装来解决的这个问题

bupafengyu 7楼•1 天前

在 uni-app 中使用 <script setup> 语法时，如果在小程序的 template 中无法获取到定义的 const 常量，可能是因为以下几个原因：

1. 作用域问题

<script setup> 是 Vue 3 的语法，它默认会将所有顶层的 const、let、var 等变量暴露给模板使用。如果你在 template 中无法访问这些常量，可能是因为它们没有在顶层定义，或者作用域不正确。

2. 编译问题

uni-app 在编译微信小程序时，可能会对 <script setup> 的代码进行一些转换，导致部分变量在模板中无法正确识别。这种情况下，可以尝试将 const 常量改为 ref 或 reactive，以确保它们能够被模板正确识别。

3. 模板语法问题

确保你在 template 中使用的语法是正确的。例如，如果你在 template 中使用了 {{ }} 插值语法，确保你访问的是正确的变量名。

示例代码

以下是一个简单的示例，展示如何在 <script setup> 中定义常量并在 template 中使用：

<template>
  <view>
    <text>{{ message }}</text>
  </view>
</template>

<script setup>
const message = 'Hello, uni-app!';
</script>

解决方法

如果上述方法仍然无法解决问题，可以尝试以下方法：

使用 ref 或 reactive：将 const 常量改为 ref 或 reactive，以确保它们在模板中能够被正确识别。

<template>
  <view>
    <text>{{ message }}</text>
  </view>
</template>

<script setup>
import { ref } from 'vue';

const message = ref('Hello, uni-app!');
</script>