uniapp vs taro3 vue 小程序动态渲染

背景

昨天晚上我花了好长时间想使用 taro 去开发一个小程序,但是我将官方模版带(nutui)拉下来后怎么跑都是跑不起来,搞得我心态爆炸(taro4 有坑,最新的 taro cli 4 也有坑,导致默认模板也有问题,另一个坑就是不要用 pnpm)。

今天我再次尝试跑 taro3 成功运行了,顺便对比 taro3 和 uniapp 对 vue 支持的一些重要特性的细节。

开始

循环渲染动态的组件

数据结构是这样的:

js 复制代码
const data = ref([
  { component: comp1, props: { label: "COMP1" } },
  { component: comp2, props: { label: "COMP2" } }
])

需求是循环渲染 data,并且按照 type 去渲染对应组件,然后将 label 渲染出来。

html 复制代码
<template>
  <view class="demo">
    <component 
      v-for="(item, index) in data" 
      :key="index" 
      :is="item.component" 
      v-bind="item.props" 
    />
  </view>
</template>

<script setup>
import { ref } from "vue";
import comp1 from "../../components/comp1/comp1.vue";
import comp2 from "../../components/comp2/comp2.vue";

const data = ref([
  { component: comp1, props: { label: "COMP1" } },
  { component: comp2, props: { label: "COMP2" } }
])

</script>

<style>
.demo {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
</style>
Taro 渲染效果 Uniapp 渲染效果

taro3 效果还是不错的,可以正确的渲染,但是 uniapp 直接是不支持这就尴尬了,本来还想继续测试一下其他的特性,看来后面只能测试 taro 了。

渲染渲染动态组件并且使用插槽渲染 label

基于上面的代码我们做一下小的更改:

html 复制代码
<template>
  <view class="demo">
    <component 
      v-for="(item, index) in data" 
      :key="index" 
      :is="item.component" 
      v-bind="item.props" 
    >
    <template #item="{ data }">
      <view style="color: red;">
        Out({{ data }})
      </view>
    </template>
   </component>
  </view>
</template>

<script setup>
import { ref } from "vue";
import comp1 from "../../components/comp1/comp1.vue";
import comp2 from "../../components/comp2/comp2.vue";

const data = ref([
  { component: comp1, props: { label: "COMP1" } },
  { component: comp2, props: { label: "COMP2" } }
])

</script>

<style>
.demo {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
</style>
Taro 渲染效果

效果很不错也能实现。

动态添加元素渲染尝试

到这一步我已经对 taro3 的印象非常不错了,在小程序实现动态组件渲染是非常难的,没想到 taro3 做的如此之好。

下面我们测试一下动态添加元素是否可以:

html 复制代码
<template>
  <view class="demo">
    <component 
      v-for="(item, index) in data" 
      :key="index" 
      :is="item.component" 
      v-bind="item.props" 
    >
    <template #item="{ data }">
      <view style="color: red;">
        <comp3 :label="data"></comp3>
      </view>
    </template>
   </component>

   <nut-button @tap="onAdd">添加</nut-button>
  </view>
</template>

<script setup>
import { ref } from "vue";
import comp1 from "../../components/comp1/comp1.vue";
import comp2 from "../../components/comp2/comp2.vue";
import comp3 from "../../components/comp3/comp3.vue";

const data = ref([
  { component: comp1, props: { label: "COMP1" } },
  { component: comp2, props: { label: "COMP2" } }
])

function onAdd(e) {
  data.value.push({ component: comp3, props: { label: "COMP1" } })
}

</script>

<style>
.demo {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
</style>
Taro 渲染效果

效果很 nice 我们成功渲染。

最后

到这里我们就基本可以确定可以使用 taro3 去做小程序开发了,真希望 uniapp 也能支持这些特性,动态组件渲染这个还是非常重要的,在代码抽象方面和传统方式大了一截。

最后项目模版在下面请自行查看,如果您觉得文章有用可以点个赞吗,这对我很重要。

Lydanne/taro-monorepo (github.com)

相关推荐
活宝小娜15 分钟前
vue不刷新浏览器更新页面的方法
前端·javascript·vue.js
程序视点17 分钟前
【Vue3新工具】Pinia.js:提升开发效率,更轻量、更高效的状态管理方案!
前端·javascript·vue.js·typescript·vue·ecmascript
coldriversnow18 分钟前
在Vue中,vue document.onkeydown 无效
前端·javascript·vue.js
我开心就好o20 分钟前
uniapp点左上角返回键, 重复来回跳转的问题 解决方案
前端·javascript·uni-app
刚刚好ā1 小时前
js作用域超全介绍--全局作用域、局部作用、块级作用域
前端·javascript·vue.js·vue
qq_17448285752 小时前
springboot基于微信小程序的旧衣回收系统的设计与实现
spring boot·后端·微信小程序
wqq_9922502772 小时前
springboot基于微信小程序的食堂预约点餐系统
数据库·微信小程序·小程序
yqcoder3 小时前
reactflow 中 useNodesState 模块作用
开发语言·前端·javascript
会发光的猪。3 小时前
css使用弹性盒,让每个子元素平均等分父元素的4/1大小
前端·javascript·vue.js
天下代码客4 小时前
【vue】vue中.sync修饰符如何使用--详细代码对比
前端·javascript·vue.js