五分钟内如何掌握keep alive命令的用法和其工作原理？

本文共计324个文字，预计阅读时间需要2分钟。

目录 + 引用 + Home.vue + About.vue + App.vue + 结合 + Router缓存页面 + router.js + Home.vue + App.vue + keep-alive + 原理 + 引用 + keep-alive + 实现组件缓存，切换组件时不会卸载当前组件。+ 主要 + include + exclude

目录

• 引言
• Home.vue
• About.vue
• App.vue
• 结合 Router，缓存页面
• router.js
• Home.vue
• App.vue
• keep-alive 原理

引言

keep-alive可以实现组件缓存，当组件切换时不会对当前组件进行卸载。

主要是有include、exclude、max三个属性；

前两个属性允许keep-alive有条件的进行缓存；

max可以定义组件最大的缓存个数，如果超过了这个个数的话，在下一个新实例创建之前，就会将以缓存组件中最久没有被访问到的实例销毁掉。

两个生命周期activated/deactivated，用来得知当前组件是否处于活跃状态。

Home.vue

<template> <div class="hello"> <h1>你怎么还在学习？