第三篇博客
uniapp 单 page页面 实现多组件手动缓存方案
Created by @一个前端er 2020/03/04
前端菜鸟一枚，欢迎各位大佬对本博文批评指正
笔者上手vue已经大半年了，最近在用uniapp做小程序开发。uniapp相比原生的微信小程序开发确实要省事不少，微信原生小程序开发有诸多限制，但是因为是原生，兼容性上不存在问题，用uniapp开发麻烦的地方就在于离不开文档，当你用到一个vue特性的时候你要确认他在uniapp中是否被支持，在你要投放的终端（微信小程序，支付宝小程序，native app等）是否被支持。如果你也是uniapp开发小白，如果你想用uniapp开发原生应用，我大概率上是不建议你用uniapp做原生开发的，如果你确实想做，这里还是比较推荐去学一下react native。
好了，开始进入正题，笔者在开发中发现uniapp微信小程序端并不支持vue的组件缓存特性，于是就想自己实现一下单页面中的多组件缓存机制，这个想法应该被很多人实践过了，但我还是想提一下。其实也很容易想到，如果你熟悉vue，就必然对v-show和v-if有很深刻的理解，v-show其实是一个语法糖，本质上隐藏元素还是将元素样式的display属性设置为none，而v-if则是在html中抽出整个代码片段，每次显示都会重新渲染，这就有了较高的切换成本，v-show则有较高的渲染成本（不管页面显示与否，页面加载时会渲染一次）。
为了实现单页面下的多组件缓存，我们只需要同时控制v-show和v-if两个指令即可。
注意：v-show在微信小程序中放在自定义组件中不生效，建议用view嵌套自定义组件，将v-show指令f放在view标签上。
上图的代码是一个简单的demo，效果如下：
c-card 是我定义的一个全局卡片组件，现在点击按钮控制隐藏与显示这三张卡片，页面加载时默认显示第一张卡片，所以要将第一张卡片的v-if和v-show属性都设置为true，其他两张卡片的两个属性都设置为false，当切换卡片时，将要显示的那张卡片的两个指令属性都设置为true，并隐藏上一张卡片。这里仅提供了一种思路，代码很粗糙，大家将就着看。
我是一枚菜鸟 @一个前端er ，下篇博客见 。
ps：找个视频转gif的免费网站咋就那么难！
附上代码：（将c-card组件删除，避免干扰）
<template>
<view>
<block v-for="(count,index) in 3" :key="index">
<view v-if="drawCard[index]" v-show="showCard[index]">
<input :value="`第${index+1}个组件`" />
</view>
</block>
<button v-for="(count,index) in 3" :key="index" @tap="handleSwitch(index)" style="margin-top:10vh" type="warn">
切换到第{
{
index+1}}卡片
</button>
</view>
</template>
<script>
export default {
data() {
return {
showCard: [true, false, false], //组件显示
drawCard: [true, false, false], //组件渲染
activeIndex: 0 //当前显示的卡片索引,默认第一张显示
}
},
methods: {
handleSwitch(index) {
if (index === this.activeIndex) {
return //重复点击不生效
}
// 将上一张卡片隐藏
this.showCard[this.activeIndex] = false
// 切换下一张卡片显示
this.drawCard[index] = true
this.showCard[index] = true
// 更新索引
this.activeIndex = index
}
},
}
</script>
<style>
</style>