[JavaScript知识库]vue的keep-alive

对keep-alive理解：

1.keep-alive是vue的内置组件，它的意思是保持活跃，当它包裹了动态组件时，会缓存不活动的组件实例，而不是销毁它们。

2.它自身不会渲染成一个DOM元素，也不会出现在父组件中。作为标签使用，包裹在需要缓存的组件外面，会缓存router-view组件，组件被缓存之后就不会触发销毁操作了，同时，这个组件只有第一次被显示的时候会创建，之后就不走创建，挂载，销毁这些生命周期了。 它主要用于保留组件的状态或避免重新渲染。

生命周期函数：

为了方便可以正常在这些组件显示或者隐藏时候调用某些操作，所以keep-alive为此提供了两个钩子函数

1.activated? 当组件被展示的时候触发;

2.deactivated 当离开(隐藏)组件的时候被触发

使用场景：

当两个页面需要来回频繁切换，此时页面里面使用的这个组件，那么这个组件就会被频繁的使用，频繁的走创建销毁。 假如这个页面的组件里一个按钮样式当前手动改变了，如果我们跳转其他页面再跳回来，这个组件就重新走了创建销毁，所以按钮样式就回到原来的样子了，这个时候我们希望组件中的按钮样式进行保留。就可以使用keep-alive将页面中的组件标签进行包裹，那么这个组件就不再因为页面的来回跳转频繁的创建销毁了，而是保持原来第一次的状态。

如果我们还需要有一些其他的操作，可以在activated和deactivated生命周期里执行

用法：

1.如果整个项目用到的组件都不用走创建销毁，则在app.vue中用keep-alive包裹router-view

<template>
  <div id="app">
    <keep-alive>
       <router-view></router-view>
    </keep-alive>
  </div>
</template>

2.如果只针对一个页面中的某一个组件进行缓存，则用keep-alive包裹组件标签

<template>
	<div class="home">
		<keep-alive>
			<mycontent></mycontent>
		</keep-alive>
	</div>
</template>
<script>
	
import mycontent from '@/components/mycontent'
	export default {
		data() {
			return {}
		},
		components:{
			mycontent
		},
		methods: {
		},
		created(option) {
		}
	}
</script>

作用：

在组件切换过程中将状态保留在内存中，防止重复渲染DOM，减少加载时间及性能消耗，提高用户体验性