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)