【Vue】keep-alive作用

keep-alive是Vue提供给我们的一个内置组件，会缓存不活动的组件实例，而不是销毁它们。作为标签使用包裹这需要缓存的组件。

是 Vue 内置的一个抽象组件，用于缓存不活动的组件实例，而不是销毁它们。：当动态组件的 props 变化时，缓存的组件可能不会正确更新。：缓存的组件实例会一直保留在内存中，可能导致内存占用过高。这样会缓存所有路由组件，可能导致不同路由间的状态混乱。：在路由中使用时，可能导致页面状态不正确保留。，类似react的useMemo、memo。生命周期可能与其他生命周期钩子（如。实例都会被缓存，导致内存问题。不变化，组件不会重新渲染。

在进行Vue开发的过程中，我们经常会遇到需要进行组件缓存的场景，这时候Vue提供的keep-alive组件就派上了用场

在vue项目中,难免会有列表页面或者搜索结果列表页面,点击某个结果之后,返回回来时,如果不对结果页面进行缓存,那么返回列表页面的时候会回到初始状态,但是我们想要的结果是返回时这个页面还是之前搜索的结果列表,这时候就需要用到vue的keep-alive技术了. keep-alive 简介 keep-alive是 Vue 内置的一个组件，可以使被包含的组件保留状态，或避免重新渲染。用法也很简单：...

1、keep-alive的使用场景 有时候我们在搜索页面不小心点了别的页面，返回的时候还想看到我们之前搜索过的数据时，这时候要用到keep-alive标签包裹组件，这时候我们的这个组件就被缓存下来了。 商品列表页点击商品跳转到商品详情，返回后仍显示原有信息 订单列表跳转到订单详情，返回，等等场景。 官网解释： 包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。和 相似， 是一个抽象组件：它自身不会渲染一个 DOM 元素，也不会出现在父组件链中。 当组件在 内被切换，它的 activated

**今天分享一下 vue中的 keep-alive标签的作用** 1.*keep-alive可以实现组件缓存，当组件切换时，主要用于保留组件状态或避免重新渲染 使用场景：比如有一个列表和一个详情，那么用户就会经常执行打开详情=>返回列表=>打开详情…这样的话列表和详情都是一个频率很高的页面，那么就可以对列表组件使用进行缓存，这样用户每次返回列表的时候，都能从缓存 * 2. 列表页和详情页都用了keep-alive标签包裹起来了，这样在我们切换这两个组件的时候就可以把里面的数据缓存起来。 ...

keep-alive目录：1.首先什么是keep-alive？2.keep-alive的作用3.keep-alive的参数4.什么时候用到keep-alive，并且怎么使用5.生命周期 钩子函数5.1 只执行一次的钩子5.2 可重复的activated 目录： 1.首先什么是keep-alive？ keep-alive是一个抽象组件：它自身不会渲染一个DOM元素，也不会出现在 父组件链中；使用keep-alive包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。简单理解就是：keep-alive用来

vue中keep-alive的作用 keep-alive：可以实现组件缓存，当组件切换时，主要用于保留组件状态或避免重新渲染。 比如：有一个列表页面和一个详情页面，那么用户就会经常执行打开详情->返回列表->打开详情，这样的话列表和详情都是一个频率很高的页面，那么就可以对列表组件使用进行缓存，这样用户每次返回列表的时候，都能从缓存中快速渲染，而不是重新渲染。 属性： include:字符串或正则表达式。只有匹配的组件会被缓存。 exclude:字符串或正则表达式。任何匹配的组件都不会被

vue中如何使用keep-alive 1.keep-alive的概念 1.1： keep-alive 是 Vue 的内置组件，当它包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。和 transition 相似，keep-alive 是一个抽象组件：它自身不会渲染成一个 DOM 元素，也不会出现在父组件链中。 2.keep-alive的作用 2.1：在组件切换过程中将状态保留在内存中，防止重复渲染DOM，减少加载时间及性能消耗，提高用户体验性 3.keep-alive的原理 3.1：在 created

keep-alive组件的作用 作用：用于保留组件状态或避免重新渲染（缓存的作用） 比如：当一个目录页面与一个详情页面，用户经常：打开目录页面=>进入详情页面=>返回目录页面=>打开详情页面，这样目录页面就是一个使用频率很高的页面，那么就可以对目录组件使用<keep-alive></keep-alive>进行缓存，这样用户每次返回目录时，都能从缓存中快速渲...

vue中的keep-alive详解与应用场景

keep-alive可以在组件切换时，保存其包裹的组件的状态，使其不被销毁，防止多次渲染。 其拥有两个独立的生命周期钩子函数 actived 和 deactived，使用keep-alive包裹的组件在切换时不会被销毁，而是缓存到内存中并执行 deactived 钩子函数，命中缓存渲染后会执行 actived 钩子函数。 ...

最常见的的场景： 从 列表页-->详情页，详情页 -->列表页。我们希望，从 详情页-->返回列表页 的时候页面的状态是缓存，不用重新请求数据，提升用户体验。 keep-alive是 Vue 内置的一个组件，可以使被包含的组件保留状态，或避免重新渲染。 实现原理： 其实就是created 时候将需要缓存的vnode节点放到cache中在render的...

keep-alive。