Vue:组件缓存

组件缓存 keep-alive

文章目录

一、keep-alive是什么

  • keep-alive是Vue中的一个内置组件,会缓存不活动的组件实例。并不会销毁组件,导致重新回到这个页面的时候,重新加载。
  • keep-alive不会渲染DOM元素。

二、keep-alive优点


其目的就是为了防止重复渲染DOM,减少加载时间以及性能的消耗。能够提高用户的体验。


三、问题

  • 包裹了 keep-alive 一级路由都会被缓存
js 复制代码
<template>
	<keep-alive>
	//谁往这里出我就缓存谁
		<router-view></router-view>
	</keep-alive>
</template>

四、解决方案

include : 组件名数组,只有匹配的组件会被缓存

exclude :组件名数组,任何匹配的组件都不会被缓存

max : 最多可以缓存多少组件实例

  • 注意 :这里的组件名:指的是name: 组件名 如果没有自己配置组件名,那么才会是文件名。

  • 需求:如果有两个组件,Layout组件 和 Deteil组件 ,我只想缓存Layout组件

五、代码示例

添加 属性 :include="组件名数组"

js 复制代码
<keep-alive :include="keepArr">
	<router-view>路由出口</router-view>
</keep-alive>

我们还可以配置组件名数组(需要缓存多个的时候)

js 复制代码
data () {
	return {
		keepArr: ['Layout']
	}
}

经过缓存后:通过include属性,缓存了Layout组件,而Deteil组件未被缓存。

  • 被缓存的会多两个生命周期钩子:
  1. actived (激活时,组件被看到时触发)
  2. deactived (失活时,离开页面,组件看不见触发)

六、回顾一下钩子

  • 组件缓存了,就不会执行组件的created mounted 和 destroyed钩子
  • 所以组件缓存会给我们提供两个钩子 actived 和 deactived
js 复制代码
created () {
	console.log('created 组件被加载了')
},
monted () {
	console.log('monted DOM渲染完了')
},
destroyed () {
	console.log('destroyed 组件被销毁了')
},
=========================================================
activated () {
	alert('返回首页')
	console.log('activated  组件被激活了,看到页面了')
},
deacivated () {
	console.log('deacivated 组件被失活了,离开页面了')
}

七、总结

  1. keep-alive是什么?
  • Vue内置的组件,包裹动态组件,可以缓存组件
  1. keep-alive有点?
  • 组件切换过程中, 把切换出去的组件保留在内存中(提升性能)
  1. keep-alive的三个属性?
  • include 组件名数组,只要匹配的都缓存
  • exclude 组件名数组, 任何匹配的组件都不会被缓存
  • max 最多可以缓存多少个组件
  1. keep-alive的使用会触发那两个生命周期钩子函数?
  • activated 当组件激活的时候触发该函数 → 进入页面触发
  • deactivated 当组件不被使用的时候触发该函数 → 离开页面触发

相关推荐
超级无敌攻城狮1 小时前
3 分钟学会!波浪文字动画超详细教程,从 0 到 1 实现「思考中 / 加载中」高级效果
前端
excel2 小时前
用 TensorFlow.js Node 实现猫图像识别(教学版逐步分解)
前端
前端工作日常2 小时前
我学习到的Vue2.6的prop修饰符
vue.js
gnip2 小时前
JavaScript事件流
前端·javascript
利刃大大2 小时前
【高并发内存池】五、页缓存的设计
c++·缓存·项目·内存池
小菜全2 小时前
基于若依框架Vue+TS导出PDF文件的方法
javascript·vue.js·前端框架·json
赵得C2 小时前
【前端技巧】Element Table 列标题如何优雅添加 Tooltip 提示?
前端·elementui·vue·table组件
wow_DG2 小时前
【Vue2 ✨】Vue2 入门之旅 · 进阶篇(一):响应式原理
前端·javascript·vue.js
weixin_456904272 小时前
UserManagement.vue和Profile.vue详细解释
前端·javascript·vue.js
资深前端之路3 小时前
react 面试题 react 有什么特点?
前端·react.js·面试·前端框架