vue keep-alive标签的运用

keep-alive，想必大家都不会很陌生，在一些选项卡中会使用到。其实，它的作用大概就是把组件的数据给缓存起来。
比如果我有一个选项卡，标签一，标签二，标签三。现在，我需要实现，当我在标签一的表单中输入内容后，点击标签二，再回到标签一，表单的内容依然存在。如果按以往的做法，不使用 keep-alive ，那是不能实现的。
然而，我们只需要在选项卡的内容最外层包一个 keep-alive 标签即可。但这儿有一个需要注意的地方，当我们使用 keep-alive 标签后，keep-alive 的下一级必须得有一个 div，不能有多个。也就是说，它跟我们根节点的 template 很像。必须得有一个跟标签的 div。

<view class="list">
	<keep-alive>
		<template v-if="types.value == '1'">
			
			<view>
				<view class="search">
					<tn-input v-model="type1.search" :border="true" placeholder="请输入关键词进行搜索" />
				view>
				<view class="checkbox">
					<tn-checkbox-group activeColor="#409eff" width="100%" v-model="type1.checkList" wrap style="height: 340px; overflow-y: scroll;">
						<template v-for="(item, index) in type1.list">
							<tn-checkbox style="padding: 10rpx 0; border-bottom: 1px solid rgba(0, 0, 0, 0.08);"
								:name="item">{{ item }}tn-checkbox>
						template>
					tn-checkbox-group>
				view>
			view>
		template>
	keep-alive>
	
	<keep-alive>
		<template v-if="types.value == '2'">
			<view>
				<view class="search">
					<tn-input v-model="type2.search" :border="true" placeholder="请输入关键词进行搜索" />
				view>
				<view class="checkbox">
					<tn-checkbox-group activeColor="#409eff" width="100%" v-model="type2.checkList" wrap style="height: 340px; overflow-y: scroll;">
						<template v-for="(item, index) in type2.list">
							<tn-checkbox style="padding: 10rpx 0; border-bottom: 1px solid rgba(0, 0, 0, 0.08);"
								:name="item">{{ item }}tn-checkbox>
						template>
					tn-checkbox-group>
				view>
			view>
		template>
	keep-alive>
view>