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页面里添加