theme: condensed-night-purple
highlight: a11y-dark
这是我参与「第五届青训营 」伴学笔记创作活动的第 6 天
keep-alive
案例：用户点击消息后跳转到其他组件，回到主页时，默认会显示新闻，
这是因为默认组件会销毁，每次点进来是新创建的组件，而不是之前的组件， 如果想保存这种状态，要使用keep-alive，保留被包含组件的状态，或避免重新渲染
keep-alive 是 Vue 内置的一个组件，可以使被包含的组件保留状态，或避免重新渲染。
它们有两个非常重要的属性:
include - 字符串或正则表达，只有匹配的组件会被缓存
exclude - 字符串或正则表达式，任何匹配的组件都不会被缓存router-view 也是一个组件，如果直接被包在 keep-alive 里面，所有路径匹配到的视图组件都会被缓存：
keep-alive ：某个组件在路由跳转后不被销毁常驻内存，故：该组件的data也得以保存 keep-alive保证经常用到的组件不会频繁创建销毁 keep-alive 确实还有用，比如把文字换成文本框，文本框的记录会保留
通过create声明周期函数来验证
生命周期：在vue实例或vue组件里面定义许多函数，会在某一时刻回调这些函数
简单的说生命周期就是事件触发条件，就像click需要点击，而生命周期就是在代码运行过程中操作间隙运行生命周期中的代码
8个**生命周期函数**，创建、挂载、更新、销毁
组件被创建出来 后回调created函数
模板挂载到DOM上 后回调mounted函数
界面发生一次刷新 就调用一次updated函数
data中的数据发生改变的时候，渲染虚拟dom，应用更新实现
```js // app.vue // 没有成功
// 方案 // 关闭重定向 // 在home.vue中使用生命周期函数及导航守卫 // 这两个函数只有该组件被保持了状态，使用了keep-alive时，才有效 // activated deactivated activated () { // 活跃时调用 this.$router.push(this.path) console.log('activated'); }, // deactivated () { // 不活跃时调用 // console.log('deactivated'); // console.log(this.$route.path); // this.path = this.$route.path // // 这里记录的是跳转到的路由，不是跳转之前的 // }, beforeRouteLeave (to, from, next) {
// 导航离开该组件的对应路由时调用 // 可以访问组件实例'this' console.log(this.$route.path); this.path = this.$route.path next() }
```
- 1.生命周期函数回顾
- 2.keep-alive -> activated/deactivated
- 3.首页中使用path属性记录离开时的路径，在beforeRouteLeave中记录.
created也会重新渲染组件而你保存在data里面的值也会随着组件的渲染被初始化 不用keep-alive，使用created和组件内导航守卫也能实现需求
说一下我的理解，离开此组件时会触发一个函数，这个函数保存现在路由的地址在this.path里面，回到此组件时候又会调用一个活跃时函数，将之前保存的地址赋值一下
好像是这样，就是每一次切换路由的时候，上一个路由都会被销毁，keep-alive的作用是让不展示的路由组件保持挂载，不被销毁。比如说组件内的input输入框输入内容之后，希望可以被缓存，可以用这个
重要的属性:
include - 字符串或正则表达，只有匹配的组件会被缓存 exclude - 字符串或正则表达式，任何匹配的组件都不会被缓存
js <keep-alive exclude="Profile,User"> // 匹配的使用组件里的name属性 <router-view></router-view> </keep-alive> - 注意空格问题，正则表达式会匹配空格，css中calc()里面也有空格的问题出现 - 这个name可以直接在路由中添加，不用在vue页面里添加