uni-app中vue3似乎不支持renderJS

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”

示例图片


更多关于uni-app中vue3似乎不支持renderJS的实战教程也可以访问 https://www.itying.com/category-93-b0.html

12 回复

支持，代码有问题吧

更多关于uni-app中vue3似乎不支持renderJS的实战教程也可以访问 https://www.itying.com/category-93-b0.html


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

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

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

目前已经支持

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

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

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

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

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

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

在 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 的功能，可以考虑以下几种替代方案：

  1. 使用 setup 函数和 render 函数：

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

export default {
  setup() {
    return () => h('div', 'Hello, World!');
  }
};

  2. 使用 JSX：

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

  3. 使用 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>

  4. 使用 ref 和 reactive 进行状态管理：

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

export default {
  setup() {
    const message = ref('Hello, World!');
    return { message };
  }
};
回到顶部