uni-app 【报Bug】vue3 setup写法微信小程序端定义一个基本数据类型在视图层为not defined on instance

开发环境	版本号	项目创建方式
Windows	win11	HBuilderX

操作步骤：

<template>
{{num}}
</template>

<script lang="ts" setup>
const num = 1;
</script>

预期结果：

视图显示 1

实际结果：

视图无显示

bug描述：

<template>
{{num}}
</template>

<script lang="ts" setup>
const num = 1;
</script>

更多关于uni-app 【报Bug】vue3 setup写法微信小程序端定义一个基本数据类型在视图层为not defined on instance的实战教程也可以访问 https://www.itying.com/category-93-b0.html

phonegap100 1楼

需要补一下vue3基础知识，const num = ref(1)才是数据绑定

h691938207 2楼

vue3 setup写法我只需要声明一个常量是不一定要用ref声明，在vue官方文档中说不使用ref不是一个响应式数据，就是修改了视图层不会发生变化，但是还是会在视图层显示的。我只需要在视图层显示一个永远不变的常量，因此并没有使用ref去声明，在h5和app端都可以正常使用，唯独在微信小程序在视图层得到一个undefined

ionicwang 3楼

这个情况只有在使用了普通数据类型的时候才会出现，如果是一个引用数据类型的话则无异常

caililin 4楼

黑子说话

yibo5220 5楼

在 uni-app 中使用 Vue 3 的 setup 写法时，如果在微信小程序端遇到基本数据类型在视图层显示为 not defined on instance 的问题，可能是由于以下原因导致的：

1. 响应式数据未正确声明

在 setup 函数中，如果你定义了一个基本数据类型（如 string、number、boolean 等），但没有使用 ref 或 reactive 将其声明为响应式数据，视图层可能无法正确识别该数据。

解决方案： 使用 ref 或 reactive 将基本数据类型声明为响应式数据。

import { ref } from 'vue';

export default {
  setup() {
    const message = ref('Hello, uni-app!');
    return {
      message
    };
  }
};

2. 数据未正确暴露

在 setup 函数中，如果你定义了一个变量，但没有将其 return 出来，视图层将无法访问该变量。

解决方案： 确保所有需要在视图中使用的变量都通过 return 暴露出来。

import { ref } from 'vue';

export default {
  setup() {
    const count = ref(0);
    return {
      count
    };
  }
};

3. 视图层语法错误

在视图层中，如果你使用了错误的语法来访问数据，也可能导致 not defined on instance 的错误。

解决方案： 确保在视图层中正确使用 {{}} 或 v-bind 来绑定数据。

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

4. `uni-app` 的兼容性问题

uni-app 在不同的平台（如微信小程序、H5、App 等）可能有不同的实现细节，尤其是在 Vue 3 的 setup 写法中，可能会有一些兼容性问题。

解决方案： 检查 uni-app 的官方文档和社区，查看是否有类似问题的解决方案。或者尝试将 setup 写法改为 Options API 写法，看看问题是否依然存在。

5. 使用 `toRefs` 解构 `reactive` 对象

如果你使用 reactive 创建了一个响应式对象，并希望在视图中使用其中的属性，建议使用 toRefs 解构该对象。

解决方案：

import { reactive, toRefs } from 'vue';

export default {
  setup() {
    const state = reactive({
      message: 'Hello, uni-app!'
    });
    return {
      ...toRefs(state)
    };
  }
};

uni-app 【报Bug】vue3 setup写法 微信小程序端定义一个基本数据类型在视图层为not defined on instance