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实现手动缓存组件简单教学(uniapp手动keep-alive)(山寨版)_第1张图片
好了,开始进入正题,笔者在开发中发现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标签上。
uniapp实现手动缓存组件简单教学(uniapp手动keep-alive)(山寨版)_第2张图片
上图的代码是一个简单的demo,效果如下:uniapp实现手动缓存组件简单教学(uniapp手动keep-alive)(山寨版)_第3张图片
c-card 是我定义的一个全局卡片组件,现在点击按钮控制隐藏与显示这三张卡片,页面加载时默认显示第一张卡片,所以要将第一张卡片的v-if和v-show属性都设置为true,其他两张卡片的两个属性都设置为false,当切换卡片时,将要显示的那张卡片的两个指令属性都设置为true,并隐藏上一张卡片。这里仅提供了一种思路,代码很粗糙,大家将就着看。
uniapp实现手动缓存组件简单教学(uniapp手动keep-alive)(山寨版)_第4张图片

我是一枚菜鸟 @一个前端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>

你可能感兴趣的:(前端)