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)

相关推荐
四喜花露水34 分钟前
Vue 自定义icon组件封装SVG图标
前端·javascript·vue.js
前端Hardy44 分钟前
HTML&CSS: 实现可爱的冰墩墩
前端·javascript·css·html·css3
瑶琴AI前端1 小时前
uniapp实现H5和微信小程序获取当前位置(腾讯地图)
微信小程序·小程序·uni-app
web Rookie1 小时前
JS类型检测大全:从零基础到高级应用
开发语言·前端·javascript
工业甲酰苯胺1 小时前
C# 单例模式的多种实现
javascript·单例模式·c#
程序员爱技术5 小时前
Vue 2 + JavaScript + vue-count-to 集成案例
前端·javascript·vue.js
丁总学Java6 小时前
页面、组件、应用、生命周期(微信小程序)
微信小程序·小程序·生命周期
悦涵仙子6 小时前
CSS中的变量应用——:root,Sass变量,JavaScript中使用Sass变量
javascript·css·sass
兔老大的胡萝卜6 小时前
ppk谈JavaScript,悟透JavaScript,精通CSS高级Web,JavaScript DOM编程艺术,高性能JavaScript pdf
前端·javascript
cs_dn_Jie10 小时前
钉钉 H5 微应用 手机端调试
前端·javascript·vue.js·vue·钉钉