uniapp实现手动缓存组件简单教学(uniapp手动keep-alive)(山寨版)

第三篇博客

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>