热门搜索 :
男性养生
您的当前位置:首页正文

vue中keep-alive使用步骤详解

2023-11-30 来源:淡苒养生网

这次给大家带来vue中keep-alive使用步骤详解,vue中keep-alive使用的注意事项有哪些,下面就是实战案例,一起来看一下。

1.keep-alive的作用以及好处

在做电商有关的项目中,当我们第一次进入列表页需要请求一下数据,当我从列表页进入详情页,详情页不缓存也需要请求下数据,然后返回列表页,这时候我们使用keep-alive来缓存组件,防止二次渲染,这样会大大的节省性能。

2.keep-alive的基本用法

在app.vue中

<!-- 缓存所有的页面 --><keep-alive> <router-view v-if="$route.meta.keep_alive"></router-view></keep-alive><router-view v-if="!$route.meta.keep_alive"></router-view>

需要缓存的组件内容直接在router中添加:

meta: { keepAlive: true // true 表示需要使用缓存 false表示不需要被缓存 }

3.keep-alive的生命周期

当引入keep-alive的时候,页面第一次进入,钩子的触发顺序created-> mounted-> activated,退出时触发deactivated。当再次进入(前进或者后退)时,只触发activated。

下面看下vue中 keep-alive 的使用问题及解决方案

问题描述

在业务开发中,会有路由跳转但是返回需要保留数据的场景;vue 中提供了 keep-alive 来处理

解决方案

返回dom不让其重新刷新,在vue-view外面包一层, 当引入keep-alive的时候,页面第一次进入,钩子的触发顺序created-> mounted-> activated,退出时触发deactivated。当再次进入(前进或者后退)时,只触发activated。

事件挂载的方法等,只执行一次的放在 mounted 中;组件每次进去执行的方法放在 activated 中; 可以将 是否包裹 keep-alive 通过参数配置;

<keep-alive> <router-view v-if="$route.meta.keepAlive" style="min-height:100%"></router-view></keep-alive><router-view v-if="!$route.meta.keepAlive" style="min-height:100%"></router-view>//不需要刷新的路由配置里面配置 meta: {keepAlive: true}, 这个路由则显示在上面标签;//需要刷新的路由配置里面配置 meta: {keepAlive: false}, 这个路由则显示在下面标签;

相信看了本文案例你已经掌握了方法,更多精彩请关注Gxl网其它相关文章!

推荐阅读:

PHP英文字母大小写转换如何实现

php生成随机数字、字母或数字字母混合的字符串

小编还为您整理了以下内容,可能对您也有帮助:

vue的keep-alive组件的使用及其实现原理

keep-alive是Vue.js的一个内置组件。它能够把不活动的组件实例保存在内存中,而不是直接将其销毁,它是一个抽象组件,不会被渲染到真实DOM中,也不会出现在父组件链中。

它提供了include与exclude两个属性,允许组件有条件地进行缓存。

具体内容可以参考 官网 。

用法

这里的component组件会被缓存起来。

举个栗子

在点击button时候,coma与comb两个组件会发生切换,但是这时候这两个组件的状态会被缓存起来,比如说coma与comb组件中都有一个input标签,那么input标签中的内容不会因为组件的切换而消失。

props

keep-alive组件提供了include与exclude两个属性来允许组件有条件地进行缓存,二者都可以用逗号分隔字符串、正则表达式或一个数组来表示。

将缓存name为a的组件。

name为a的组件将不会被缓存。

生命钩子

keep-alive提供了两个生命钩子,分别是activated与deactivated。

因为keep-alive会将组件保存在内存中,并不会销毁以及重新创建,所以不会重新调用组件的created等方法,需要用activated与deactivated这两个生命钩子来得知当前组件是否处于活动状态。

说完了keep-alive组件的使用,我们从源码角度看一下keep-alive组件究竟是如何实现组件的缓存的呢?

created与destroyed钩子

created钩子会创建一个cache对象,用来作为缓存容器,保存vnode节点。

destroyed钩子则在组件被销毁的时候清除cache缓存中的所有组件实例。

render

首先通过getFirstComponentChild获取第一个子组件,获取该组件的name(存在组件名则直接使用组件名,否则会使用tag)。接下来会将这个name通过include与exclude属性进行匹配,匹配不成功(说明不需要进行缓存)则不进行任何操作直接返回vnode,vnode是一个VNode类型的对象,不了解VNode的同学可以参考笔者的另一篇文章 《VNode节点》 .

检测include与exclude属性匹配的函数很简单,include与exclude属性支持字符串如"a,b,c"这样组件名以逗号隔开的情况以及正则表达式。matches通过这两种方式分别检测是否匹配当前组件。

接下来的事情很简单,根据key在this.cache中查找,如果存在则说明之前已经缓存过了,直接将缓存的vnode的componentInstance(组件实例)覆盖到目前的vnode上面。否则将vnode存储在cache中。

最后返回vnode(有缓存时该vnode的componentInstance已经被替换成缓存中的了)。

watch

用watch来监听include与exclude这两个属性的改变,在改变的时候修改cache缓存中的缓存数据。

来看一下pruneCache的实现。

遍历cache中的所有项,如果不符合filter指定的规则的话,则会执行pruneCacheEntry。pruneCacheEntry则会调用组件实例的$destroy方法来将组件销毁。

Vue.js内部将DOM节点抽象成了一个个的 VNode节点 , keep-alive组件的缓存也是基于VNode节点的而不是直接存储DOM结构。它将满足条件(include与exclude)的组件在cache对象中缓存起来,在需要重新渲染的时候再将vnode节点从cache对象中取出并渲染。

原文: 聊聊keep-alive组件的使用及其实现原理

15《Vue 入门教程》Vue 动态组件 &amp;amp; keep-alive

本小节我们将介绍 Vue 的动态组件,以及缓存 keep-alive 的使用。包括动态组件的使用方法,以及如何使用 keep-alive 实现组件的缓存效果。

动态组件是让多个组件使用同一个挂载点,并动态切换。动态组件是 Vue 的一个高级用法,但其实它的使用非常简单。keep-alive 是 vue 的内置组件,能在组件切换过程中将状态保存在内存中,防止重复渲染 DOM。

通过使用保留的 元素,动态地把组件名称绑定到它的 is 特性,可以实现动态组件:

实例演示

"运行案例" 可查看在线运行效果

代码解释: HTML 代码第 2 行,我们使用动态组件 component,将当前需要展示的组件名通过变量 currentView 绑定到 component 的 is 属性上。 HTML 代码第 3-5 行,我们定义了三个按钮,通过点击按钮切换 currentView 的值。 JS 代码第 3-11 行,我们定义了组件 ComponentA、ComponentB、ComponentC。

最终的实现效果是:当点击按钮的时候会动态切换展示的组件。

keep-alive 是 Vue 提供的一个抽象组件,用来对组件进行缓存,从而节省性能,由于是一个抽象组件,所以在页面渲染完毕后不会被渲染成一个 DOM 元素。被 keep-alive 缓存的组件只有在初次渲染时才会被创建,并且当组件切换时不会被销毁。

keep-alive 的用法相对简单,直接使用 keep-alive 包裹需要缓存的组件即可:

实例演示

"运行案例" 可查看在线运行效果

代码解释: HTML 代码第 2-3 行,我们使用 keep-alive 包裹动态组件 component,将当前需要展示的组件名通过变量 currentView 绑定到 component 的 is 属性上。 HTML 代码第 5-7 行,我们定义了三个按钮,通过点击按钮切换 currentView 的值。 JS 代码第 3-29 行,我们定义了组件 ComponentA、ComponentB、ComponentC,分别定义了他们的 created 和 beforeDestroy 事件。

之前我们介绍过, keep-alive 缓存的组件只有在初次渲染时才会被创建。所以,我们通过修改 currentView 切换组件时,组件的 beforeDestroy 事件不会触发。若该组件是第一次渲染,会触发 created 事件,当再次切换显示该组件时,created 事件不会再次触发。

activated 和 deactivated 和我们之前学习的生命周期函数一样,也是组件的生命周期函数。不过, activated 和 deactivated 只在 内的所有嵌套组件中触发。 activated :进入组件时触发。 deactivated :退出组件时触发。

示例代码:

实例演示

"运行案例" 可查看在线运行效果

代码解释: JS 代码中,我们定义了组件 ComponentA、ComponentB,并分别定义了他们的 activated 和 deactivated 事件函数。 HTML 代码第 2-3 行,我们使用 keep-alive 包裹动态组件 component,将当前需要展示的组件名通过变量 currentView 绑定到 component 的 is 属性上。 HTML 代码第 5-6 行,我们定义了两个按钮,通过点击按钮切换 currentView 的值。当我们切换组件显示时,可以看到这样的打印信息:

include 和 exclude 是 keep-alive 的两个属性,允许组件有条件地缓存。 include: 可以是字符串或正则表达式,用来表示只有名称匹配的组件会被缓存。 exclude: 可以是字符串或正则表达式,用来表示名称匹配的组件不会被缓存。

示例:

实例演示

"运行案例" 可查看在线运行效果

代码解释: HTML 代码第 2-4 行,我们使用 keep-alive 包裹动态组件 component。给 keep-alive 指定需要缓存组件 ComponentA,ComponentB。 在之前的小节我们了解到 keep-alive 缓存的组件只有在初次渲染时才会被创建。所以,在案例中,组件 ComponentA 和 ComponentB 的 created 函数只有在第一次组件被创建的时候才会触发,而 ComponentC 的 created 函数当每次组件显示的时候都会触发。

exclude 示例:

实例演示

"运行案例" 可查看在线运行效果

代码解释: HTML 代码第 2-4 行,我们使用 keep-alive 包裹动态组件 component。给 keep-alive 指定不需要缓存组件 ComponentA,ComponentB。

本节,我们带大家学习了动态组件和缓存组件在项目中的运用。主要知识点有以下几点:

Vue keep-alive防止重复渲染DOM总结

一,VUE单页面应用文件实现返回上一页面时保留之前的数据

最近在做项目时,需要实现下面场景:

在页面查询列表,进入详情页时,返回时需要页面返回到上次浏览的位置(保留之前的当前页和搜索条件数据)

针对上面的 需求:
页面的缓存,我们需要用到vue的内置组件 keep-alive ,来缓存列表页面,同时配合路由选项俩更改页面的数据
1.在路由出口渲染组件时配置:

介绍一下 <keep-alive> 这个内置组件
<keep-alive>是vue 的内置组件,能在组件切换过程中将状态保留在内存中,防止重复渲染DOM。
<keep-alive> 包裹动态组件时,而不是销毁他们。和 <transition> 相似, <keep-alive> 是一个抽象组件:他自身不会渲染一个DOM元素,也不会出现在父组件链中。
<keep-alive> 有两个属性:
(1) include :字符串或者正则表达式,只有匹配的组件会被缓存。
exclude :字符串或者正则表达式,任何匹配的组件都不会被缓存。
2.在需要做缓存的页面加上name

注意需要缓存页面里的name里的名字 要和 include里的名字一致才会缓存。

Vue keep-alive防止重复渲染DOM总结

一,VUE单页面应用文件实现返回上一页面时保留之前的数据

最近在做项目时,需要实现下面场景:

在页面查询列表,进入详情页时,返回时需要页面返回到上次浏览的位置(保留之前的当前页和搜索条件数据)

针对上面的 需求:
页面的缓存,我们需要用到vue的内置组件 keep-alive ,来缓存列表页面,同时配合路由选项俩更改页面的数据
1.在路由出口渲染组件时配置:

介绍一下 <keep-alive> 这个内置组件
<keep-alive>是vue 的内置组件,能在组件切换过程中将状态保留在内存中,防止重复渲染DOM。
<keep-alive> 包裹动态组件时,而不是销毁他们。和 <transition> 相似, <keep-alive> 是一个抽象组件:他自身不会渲染一个DOM元素,也不会出现在父组件链中。
<keep-alive> 有两个属性:
(1) include :字符串或者正则表达式,只有匹配的组件会被缓存。
exclude :字符串或者正则表达式,任何匹配的组件都不会被缓存。
2.在需要做缓存的页面加上name

注意需要缓存页面里的name里的名字 要和 include里的名字一致才会缓存。

vue使用keep-alive实现页面前进刷新,后退缓存

vue中,我们有时候需要实现这种场景:

1.搜索页面到列表页面,需要刷新重新获取数据。

2.从详情页面返回列表页面需要记住上次浏览的状态。具体流程如下:

第一步:在路由配置文件中为列表页设置meta参数,里面包含useCatch和keepAlive

第二步:在App文件中如下设置

第三步:在列表页面添加leaveTag字段,当点击返回按钮触发返回事件的时候,将leaveTag修改为back,然后在beforeRouteLeave中如下:

第四步:在列表页的actived生命周期函数中根据useCatch字段判断是否需要缓存:

这种处理方式会有bug,打开列表页会有上次的残留停顿一下,最新文章已解决,详情请看我的最新文章。

vue使用keep-alive实现页面前进刷新,后退缓存

vue中,我们有时候需要实现这种场景:

1.搜索页面到列表页面,需要刷新重新获取数据。

2.从详情页面返回列表页面需要记住上次浏览的状态。具体流程如下:

第一步:在路由配置文件中为列表页设置meta参数,里面包含useCatch和keepAlive

第二步:在App文件中如下设置

第三步:在列表页面添加leaveTag字段,当点击返回按钮触发返回事件的时候,将leaveTag修改为back,然后在beforeRouteLeave中如下:

第四步:在列表页的actived生命周期函数中根据useCatch字段判断是否需要缓存:

这种处理方式会有bug,打开列表页会有上次的残留停顿一下,最新文章已解决,详情请看我的最新文章。

Vue 怎么缓存当前的组件?缓存后怎么更新?说说你对keep-alive的理解是什么

keep-alive 是 vue 中的内置组件,能在组件切换过程中将状态保留在内存中,防止重复渲染 DOM

keep-alive 包裹动态组件时,会缓存不活动的组件实例,而不是销毁它们

keep-alive 可以设置以下 props 属性:

关于 keep-alive 的基本用法:

使用 includes 和 exclude :

匹配首先检查组件自身的 name 选项,如果 name 选项不可用,则匹配它的局部注册名称 (父组件 components 选项的键值),匿名组件不能被匹配

设置了 keep-alive 缓存的组件,会多出两个生命周期钩子( activated 与 deactivated ):

使用原则:当我们在某些场景下不需要让页面重新加载时我们可以使用 keepalive

举个栗子:

当我们从 首页 –> 列表页 –> 商详页 –> 再返回 ,这时候列表页应该是需要 keep-alive

从 首页 –> 列表页 –> 商详页 –> 返回到列表页(需要缓存) –> 返回到首页(需要缓存) –> 再次进入列表页(不需要缓存) ,这时候可以按需来控制页面的 keep-alive

在路由中设置 keepAlive 属性判断是否需要缓存

使用 <keep-alive>

keep-alive 是 vue 中内置的一个组件

源码位置:src/core/components/keep-alive.js

可以看到该组件没有 template ,而是用了 render ,在组件渲染的时候会自动执行 render 函数

this.cache 是一个对象,用来存储需要缓存的组件,它将以如下形式存储:

在组件销毁的时候执行 pruneCacheEntry 函数

在 mounted 钩子函数中观测 include 和 exclude 的变化,如下:

如果 include 或 exclude 发生了变化,即表示定义需要缓存的组件的规则或者不需要缓存的组件的规则发生了变化,那么就执行 pruneCache 函数,函数如下:

在该函数内对 this.cache 对象进行遍历,取出每一项的 name 值,用其与新的缓存规则进行匹配,如果匹配不上,则表示在新的缓存规则下该组件已经不需要被缓存,则调用 pruneCacheEntry 函数将其从 this.cache 对象剔除即可

关于 keep-alive 的最强大缓存功能是在 render 函数中实现

首先获取组件的 key 值:

拿到 key 值后去 this.cache 对象中去寻找是否有该值,如果有则表示该组件有缓存,即命中缓存,如下:

直接从缓存中拿 vnode 的组件实例,此时重新调整该组件 key 的顺序,将其从原来的地方删掉并重新放在 this.keys 中最后一个

this.cache 对象中没有该 key 值的情况,如下:

表明该组件还没有被缓存过,则以该组件的 key 为键,组件 vnode 为值,将其存入 this.cache 中,并且把 key 存入 this.keys 中

此时再判断 this.keys 中缓存组件的数量是否超过了设置的最大缓存数量值 this.max ,如果超过了,则把第一个缓存组件删掉

解决方案可以有以下两种:

每次组件渲染的时候,都会执行 beforeRouteEnter

在 keep-alive 缓存的组件被激活的时候,都会执行 actived 钩子

注意:服务器端渲染期间 avtived 不被调用

vue 缓存组件keep-alive

kee-alive 是 Vue 内置的一个组件, 可以使被包含的组件保留状态,或避免重新渲染 。也就是所谓的组件缓存

keep-alive是一个抽象的组件,缓存的组件不会被mounted,为此提供activated和deactivated钩子函数

在2.1.0 版本后keep-alive新加入了两个属性: include(包含的组件缓存生效) 与 exclude(排除的组件不缓存,优先级大于include) 。

keep-alive可以接收3个属性做为参数进行匹配对应的组件进行缓存:

include 包含的组件(可以为字符串,数组,以及正则表达式,只有匹配的组件会被缓存)

exclude 排除的组件(以为字符串,数组,以及正则表达式,任何匹配的组件都不会被缓存)

max 缓存组件的最大值(类型为字符或者数字,可以控制缓存组件的个数)

配合router使用

1.keep-alive 先匹配被包含组件的 name 字段,如果 name 不可用,则匹配当前组件 components 配置中的注册名称。

2.keep-alive 不会在函数式组件中正常工作,因为它们没有缓存实例。

3.当匹配条件同时在 include 与 exclude 存在时,以 exclude 优先级最高(当前vue 2.4.2 version)。比如:包含于排除同时匹配到了组件A,那组件A不会被缓存。

4.包含在 keep-alive 中,但符合 exclude ,不会调用activated和 deactivated。

参考 https://juejin.cn/post/6844903918313406472

参考 https://www.imooc.com/article/302879

淡苒养生网还为您提供以下相关内容希望对您有帮助:

vue使用keep-alive实现页面前进刷新,后退缓存

第一步:在路由配置文件中为列表页设置meta参数,里面包含useCatch和keepAlive 第二步:在App文件中如下设置 第三步:在列表页面添加leaveTag字段,当点击返回按钮触发返回事件的时候,将leaveTag修改为back,然后在beforeRouteLeave...

15《Vue 入门教程》Vue 动态组件 &amp; keep-alive

include 和 exclude 是 keep-alive 的两个属性,允许组件有条件地缓存。 include: 可以是字符串或正则表达式,用来表示只有名称匹配的组件会被缓存。 exclude: 可以是字符串或正则表达式,用来表示名称匹配的组件不...

vue页面缓存(keepAlive)

meta: {        keepAlive:false // 该路由不会被缓存,不需要缓存的时候该属性可以不用写      } }]})这时候页面还需要通过该属性进行判断是否缓存 在App.vue  ...

vue的keep-alive组件的使用及其实现原理

Vue.js内部将DOM节点抽象成了一个个的 VNode节点 , keep-alive组件的缓存也是基于VNode节点的而不是直接存储DOM结构。它将满足条件(include与exclude)的组件在cache对象中缓存起来,在需要重新渲染的时候再将vnode节点从cache...

Vue keep-alive防止重复渲染DOM总结

针对上面的 需求: 页面的缓存,我们需要用到vue的内置组件 keep-alive ,来缓存列表页面,同时配合路由选项俩更改页面的数据 1.在路由出口渲染组件时配置:介绍一下 &lt;keep-alive&gt; 这个内置组件 &lt;keep-alive&gt;是vue...

Vue 怎么缓存当前的组件?缓存后怎么更新?说说你对keep-alive的...

使用 &lt;keep-alive&gt; keep-alive 是 vue 中内置的一个组件 源码位置:src/core/components/keep-alive.js 可以看到该组件没有 template ,而是用了 render ,在组件渲染的时候会自动执行 render 函数 this.cache 是一个对象...

vue使用keep-alive缓存页面,返回页面时刷新部分数据

1、不使用keep-alive的情况:beforeRouteEnter --&gt; created --&gt; mounted --&gt; destroyed 2、使用keep-alive的情况:beforeRouteEnter --&gt; created --&gt; mounted --&gt; activated --&gt; deactivated 3、使用keep-alive,并且...

keep-alive缓存篇(进阶篇)

体验地址: http://8.135.1.141/vue3-admin-plus 系列文章入口:当我们在某些特定场景中需要缓存某个页面,此时就需要用到我们所需要讲的keep-alive,本篇主要讲解架构中keep-alive的原理和使用 keep-alive体验地址 src/...

vue中动态路由组件缓存及生命周期函数

&lt;keep-alive&gt;是Vue的内置组件,能在组件切换过程中将状态保留在内存中,防止重复渲染DOM。&lt;keep-alive&gt; 包裹动态组件时,会缓存不活动的组件实例,而不是销毁它们。和 &lt;transition&gt; 相似,&lt;keep-alive&gt; 是一个抽象组件:它...

Vue keep-alive本地路由缓存和图片懒加载

keep-alive用来缓存组件,避免了每次点击其他页面都要加载,减少性能消耗和提高用户体验,下图缓存整个路由视图(所有页面),也可以缓存单个组件 图片懒加载用了 vue-lazyload 组件,npm安装:npm i vue-lazyload -S 我是...

Top