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 当组件不被使用的时候触发该函数 → 离开页面触发

相关推荐
无双_Joney13 小时前
[更新迭代 - 1] Nestjs 在24年底更新了啥?(功能篇)
前端·后端·nestjs
在云端易逍遥13 小时前
前端必学的 CSS Grid 布局体系
前端·css
EMT13 小时前
在 Vue 项目中使用 URL Query 保存和恢复搜索条件
javascript·vue.js
ccnocare13 小时前
选择文件夹路径
前端
艾小码13 小时前
还在被超长列表卡到崩溃?3招搞定虚拟滚动,性能直接起飞!
前端·javascript·react.js
闰五月13 小时前
JavaScript作用域与作用域链详解
前端·面试
泉城老铁13 小时前
idea 优化卡顿
前端·后端·敏捷开发
前端康师傅13 小时前
JavaScript 作用域常见问题及解决方案
前端·javascript
司宸13 小时前
Prompt结构化输出:从入门到精通的系统指南
前端