原文：vue中 keep-alive的作用 和activated 和 deactivated 生命周期理解
keep alive 简介 keep alive是 Vue 内置的一个组件，可以使被包含的组件保留状态，或避免重新渲染。 用法 props include 字符串或正则表达，只有匹配的组件会被缓存 exclude 字符串或正则表达式，任何匹配的组件都不会被缓存 . . 新增include和exclude属性允许组件有条件地缓存。二者都可以用逗号分隔字符串 正则表达式或一个数组来表示： max . ...
2022-01-12 14:32 0 1389 推荐指数：
相关推荐
<keep-alive>包裹的动态组件会被缓存，它是一个抽象组件，它自身不会渲染一个dom元素，也不会出现在父组件链中。当组件在 <keep-alive> 内被切换，它的 activated 和 deactivated 这两个生命周期钩子函数将会被对应执行。 如< ...
keep-aliveProps：include - 字符串或正则表达式。只有名称匹配的组件会被缓存。exclude - 字符串或正则表达式。任何名称匹配的组件都不会被缓存。max - 数字。最多可以缓存多少组件实例。用法：<keep-alive> 包裹动态组件时，会缓存不活动的组件实例 ...
1、通过keep-alive和router-view实现路由缓存，具体代码如下：在app.vue： <router-view v-if="!$route.meta.keepAlive"/> <keep-alive> <router-view v-if ...
keep-alive 生命周期 父组件 组件A： 组件B： 切换组件A和组件B，控制台打印： 结论： 首次激活时，activated都在mounted后。 再次激活时，本组件只走activated（另外一组件先失活deactivated） 组件失活时，均不 ...
beforecreated： 创建前状态 el 和 data 并未初始化 created: 创建完毕状态 完成了 data 数据的初始化，el没有 beforeM ...
keep-alive缓存（ 一般都要将首次创建的组件缓存，提高性能） keep-alive对应两个生命周期,activated(){} deactivated ...
keep-alive用法 <keep-alive>是Vue的内置组件，能在组件切换过程中将状态保留在内存中，防止重复渲染DOM。 include: 字符串或正则表达式。只有匹配的组件会被缓存。 exclude: 字符串或正则表达式。任何匹配的组件都不会被缓存 ...