Vue中keep-alive的理解

最新推荐文章于 2024-01-20 10:00:00 发布

G.B.Monkey

最新推荐文章于 2024-01-20 10:00:00 发布

阅读量220

点赞数

文章标签： vue

本文链接：https://blog.csdn.net/qq_41381249/article/details/118771701

版权

keep-alive的理解

从实习到现在差不多工作两年了，从一个赤裸裸的后端开发转成了一个前端开发，目前在公司使用的vue进行开发，开发的过程中也是看别人怎么做自己怎么做完全是照搬。但人总有思考人生的时候，哈哈哈哈。所以这段时间找了一个项目来看，从基本项目内容看起，过程中遇到了很多不懂或者在之前工作中没有理解透的东西。

本次是正好看别人项目第三天，遇到了keep-alive属性，想想在之前确实没怎么弄懂，所以这次就写了个demo再次进行了理解。代码如下

<!DOCTYPE html>
<html>
<head>
	<title>vue-tran</title>
	<style>
		.v-enter, .v-leave-to {
			opacity: 0;
			transform: translateX(150px);
		}
		.v-enter-active, .v-leave-active {
			transition: all 0.8s ease;
		}

	</style>
</head>
<body>
	<div id="app">
		<div>
			<button @click='flag=!flag'>测试动画</button>
			<button @click='flag2=!flag2'>测试动画</button>
			<button @click='changeCom'>切换组件</button>
		</div>

		<transition>
			<div v-if='flag'>
				测试内容
			</div>
		</transition>
		<transition name='my'>
			<div v-if='flag2'>
				测试内容2
			</div>
		</transition>
		<keep-alive>
			<component v-if='view != "com4"' :is='view'>
			</component>
		</keep-alive>
		<div v-if='view == "com4"'>
			<component :is='view'></component>
		</div>
	</div>
<!-- 引入vue.js -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script type="text/javascript">
	// 注册全局组件
	Vue.component('com1', {
		data: function() {
			return {

			}
		},
		mounted() {
			console.log('mounted1');
		},
		activated() {
			console.log('activated1');
		},
		deactivated() {
			console.log('deactivated1')
		},
		destroyed() {
			console.log('destoryed1')
		},
		template: "<div>template1</div>"
	})
	Vue.component('com2', {
		data: function() {
			return {

			}
		},
		mounted() {
			console.log('mounted2');
		},
		activated() {
			console.log('activated2');
		},
		deactivated() {
			console.log('deactivated2')
		},
		destroyed() {
			console.log('destoryed2')
		},
		template: "<div>template2</div>",

	})
	// 创建vue实例 并自动挂载到 id=app上  当然这里也可以手动挂载
	var vm = new Vue({
		el: '#app',
		data: {
			flag: false,
			flag2: false,
			view: 'com1'
		},
		// 注册内部组件
		components: {
			'com3': {
				name: 'com3a',
				template: '<div>template3</div>',
				mounted() {
					console.log('mounted3');
				},
				activated(){
					console.log('activated3');
				},
				deactivated() {
					console.log('deactivated3');
				},
				destroyed() {
					console.log('destoryed3')
				}
			},
			'com4': {
				name: 'com4a',
				template: '<div>template4</div>',
				mounted() {
					console.log('mounted4');
				},
				activated(){
					console.log('activated4');
				},
				deactivated() {
					console.log('deactivated4');
				},
				destroyed() {
					console.log('destoryed4')
				}
			}
		},
		methods: {
			changeCom() {
				if (this.view == "com1") {
					this.view = "com2"
				} else if (this.view == "com2") {
					this.view = "com3"
				} else if (this.view == "com3"){
					this.view = "com4"
				} else{
					this.view = "com1"
				}
			}
		}
	})
</script>
</body>
</html>

代码可以直接拷贝，新建一个html文件，将内容进行拷贝即可，用谷歌浏览器打开得到如下界面。
文件打开示例图
这里先简单描述一下代码内容，代码中总设置了四个组件，分别为

com1、com2、com3、com4

其中com1和com2为全局组件，com3和com4为局部组件。为了测试写了一个切换组件的方法changeCom()，用于将组件从com1-com4进行切换。其中com1-com3使用了keep-alive进行了包裹，com4是单独的节点。

在生成html文件后直接在浏览器中打开，并打开控制台可以看到如下信息。
在这里插入图片描述
从浏览器的打印我们可以直观看到，执行了com1的mounted和activited回调。

接下来我们点击“切换组件”按钮，可得到如下结果
在这里插入图片描述
可以很直观的看出，其首先调用了com1的deactivated回调，后调用了com2的mounted和activited回调。接下来我们再点击一次“切换组件”按钮，得到结果如下

与第一次点击结果类似，调用com2的deactivated回调，以及调用了com3的mounted和activited回调。
接下来我们再点击一次“切换组件”按钮，此时是从com3切换到com4的过程，结果如下。
在这里插入图片描述
我们可以看到这次的结果和之前结果存在差异，差异就是没有调用com4的activited回调。
按照上面方式再进行点击“切换组件”按钮，总共点击5次，得到结果如下。

可以看到差异，当从com4切换到com1的时候，这个地方调用了com4的destroyed回调。并且此时只调用com1的activited回调，同样从com1切换com3的过程中调用的也只是对应组件的activited和deactivated，并未涉及到组件的mounted回调。但切换到com4的时候其调用了com4的mounted回调，并在com4再次切换到com1的时候调用了com4的destroyed回调。

从结果上来开存在差异的地方主要是com4组件，这也正体现了keep-alive的作用，因为只有com4没有被该标签包裹。

总结：在使用keep-alive标签包裹的组件中，组件会进行缓存，当组件首次进入的时候会调用组件的mounted和activited钩子，当组件被变更时会调用变更前组件的deactivited钩子但并不会调用组件的destroyed钩子，并且当组件再次被切换回来时只会调用对应的activited钩子。而对于不被keep-alive标签包裹的组件则每次都需要调用mounted和destroyed钩子，并且其不会调用activited和deactivited钩子。所以简单来说keep-alive起到了缓存组件的作用

G.B.Monkey

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
2
评论
Vue中keep-alive的理解

keep-alive从实习到现在差不多工作两年了，从一个赤裸裸的后端开发转成了一个前端开发，目前在公司使用的vue进行开发，开发的过程中也是看别人怎么做自己怎么做完全是照搬。但人总有思考人生的时候，哈哈哈哈。所以这段时间找了一个项目来看，从基本项目内容看起，过程中遇到了很多不懂或者在之前工作中没有理解透的东西。本次是正好看别人项目第三天，遇到了keep-alive属性，想想在之前确实没怎么弄懂，所以这次就写了个demo再次进行了理解。代码如下<!DOCTYPE html><html
复制链接

扫一扫