uni-app中vue3似乎不支持renderJS

项目属性	值
产品分类	uniapp/App
PC开发环境操作系统	Mac
PC开发环境操作系统版本号	m1
手机系统	iOS
手机系统版本号	iOS 15
手机厂商	苹果
手机机型	12 promax
页面类型	vue
vue版本	vue2
打包方式	云端
项目创建方式	CLI
CLI版本号	3.0.0-alpha-3040820220424001

示例代码：

<template>  
  <view style="width:100vw;height:1200rpx;" >  
    <canvas id="canvas" ref="canvasRef" type="2d" style="width: 100%;height: 100%;"></canvas>  
  </view>  
</template>  

<script setup  module="Lottie" lang="renderjs">  
import {onMounted, ref} from "vue";  

onMounted(() => {  
  console.log("进来");  

})  
</script>  

<style>  
.flex {  
  display: flex;  
}  

.flex-col {  
  display: flex;  
  flex-direction: column;  
}  

.row-center {  
  justify-content: center;  
}  
</style>

操作步骤：

用苹果手机打开就会报错

预期结果：

正常执行

实际结果：

打开就报错，无法往下执行

bug描述：

错误提示 [1654593797199][0ms][renderjs]：“41218870 not found”

示例图片

ionicwang 1楼•12 天前

支持，代码有问题吧

sinazl 2楼•12 天前作者

最简单的，就是在script加上lang和module

sinazl 3楼•12 天前作者

renderjs应该是不支持setup语法糖，你去掉setup,使用export default {}试试看，应该就不报错了。

ionicwang 4楼•12 天前

官方什么时候支持在vue3使用renderjs？

eggper 5楼•12 天前

目前已经支持

htzhanglong 6楼•12 天前

感谢官方的努力，这就去试试

h691938207 7楼•12 天前

uniapp vue3.0 我现在这里使用setup 还是 [1681091604888][0ms][renderjs]：“450a34ee not found”

ionicwang 8楼•12 天前

回复 3***@qq.com: 同样的问题。

yibo5220 9楼•12 天前

什么版本之后开始支持？我3.5.3打包后，真机完全不触发，本地，虚拟机都没有问题

wuwangju 10楼•12 天前

最新版本的vue3 setup lang="ts"确实不支持亲测后报错

bupafengyu 11楼•12 天前

将onMounted生命周期改为mounted就可以了，亲测有效

yuanlaile 12楼•12 天前

在 uni-app 中，Vue 3 确实对 renderJS 的支持存在一些限制。renderJS 是 uni-app 提供的一种在 Vue 组件中直接使用原生 JavaScript 进行渲染的方式，通常用于处理一些复杂的逻辑或动态生成的内容。

问题背景

在 Vue 2 中，uni-app 支持通过 renderJS 来动态生成 VNode，但在 Vue 3 中，由于 Vue 3 的渲染机制和 Vue 2 有较大差异，renderJS 的支持并不完善，甚至在某些情况下无法正常工作。

解决方案

如果你在 uni-app 中使用 Vue 3 并且需要类似 renderJS 的功能，可以考虑以下几种替代方案：

使用 setup 函数和 render 函数：
- 在 Vue 3 中，你可以使用 setup 函数结合 render 函数来实现动态渲染。render 函数允许你直接返回 VNode，从而实现类似 renderJS 的效果。
```
import { h } from 'vue';

export default {
  setup() {
    return () => h('div', 'Hello, World!');
  }
};
```
使用 JSX：
- Vue 3 支持 JSX，你可以使用 JSX 来编写更灵活的模板代码。JSX 允许你在 JavaScript 中直接编写类似 HTML 的代码，从而实现动态渲染。
```
export default {
  setup() {
    return () => <div>Hello, World!</div>;
  }
};
```

使用 v-if 和 v-for 指令：

对于大多数动态渲染的场景，Vue 的模板语法（如 v-if 和 v-for）已经足够强大。你可以通过条件渲染和列表渲染来实现动态内容。

<template>
  <div v-if="showMessage">Hello, World!</div>
  <ul>
    <li v-for="item in items" :key="item.id">{{ item.text }}</li>
  </ul>
</template>

<script>
export default {
  data() {
    return {
      showMessage: true,
      items: [
        { id: 1, text: 'Item 1' },
        { id: 2, text: 'Item 2' }
      ]
    };
  }
};
</script>

使用 ref 和 reactive 进行状态管理：
- Vue 3 引入了 ref 和 reactive 来管理组件的状态。你可以通过这些 API 来动态更新组件的状态，从而实现动态渲染。
```
import { ref } from 'vue';

export default {
  setup() {
    const message = ref('Hello, World!');
    return { message };
  }
};
```