背景
昨天晚上我花了好长时间想使用 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 也能支持这些特性,动态组件渲染这个还是非常重要的,在代码抽象方面和传统方式大了一截。
最后项目模版在下面请自行查看,如果您觉得文章有用可以点个赞吗,这对我很重要。