示例vue保活缓存功能的实现

本文主要介绍了vue保活缓存功能的实现，非常全面详细，具有一定的参考价值。有需要的朋友可以参考借鉴。如有不足，请批评指正。

Keep-alive是Vue的内置组件，可以在组件切换时保持内存中的状态，防止DOM被重复渲染。

当保活包装动态组件时，它缓存非活动组件实例，而不是销毁它们。像transition一样，keep-alive是一个抽象组件：它不会自己呈现一个DOM元素，也不会出现在父组件链中。

prop:

包含：字符串或正则表达式。只会缓存匹配的组件。Exclude:字符串或正则表达式。任何匹配的组件都不会被缓存。Vue实现了组件信息的缓存

当我们在开发vue的项目时，不可避免地会在路由切换到其他组件后重新加载组件数据，然后返回。为了应对这种情况，我们需要使用keep-alive来缓存vue的组件信息，这样它就不会被重载。

首先，在app.vue中

Keep-alive路由器-view/router-view/keep-alive，但在这种情况下，所有组件都会被缓存，无法达到单个组件缓存的效果。

然后我们添加一些组件，实现方法如下：

At app.vue

！-keep-alive router-view v-if=' $ route . meta . keep alive '/router-view keep-alive！-不会有keepalive-router-view v-if='！$ route . meta . keepalive '/路由器-视图二。在路由的index.js页面中，

{path: ' '，name: ' '，component: ' '，Meta 3360 { keepalive 3360 true }//这是keepalive}，{path3360 ' '，name: ' '，component3360，Meta : { keepalive : false }//这不会是keepalive}这实现了部分组件的缓存功能

如果缓存组件想要清空数据或执行初始化方法，请在加载组件时调用激活的钩子函数，如下所示：

Activated:函数(){this。data=''}以上就是本文的全部内容，希望对大家的学习有所帮助，支持我们。