这是我参与「第五届青训营 」伴学笔记创作活动的第 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，应用更新 

实现

// app.vue
    <keep-alive>
      <router-view></router-view>  
      <!-- 这样写没有成功，因为home里的router-view没有被包裹在keep-alive里 
      重定向默认值比保活先执行，所以显示的是news-->
    </keep-alive>
    // 没有成功

// 方案
// 关闭重定向
// 在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 - 字符串或正则表达式，任何匹配的组件都不会被缓存

    <keep-alive exclude="Profile,User">   // 匹配的使用组件里的name属性
      <router-view></router-view>  
    </keep-alive>

• 注意空格问题，正则表达式会匹配空格，css中calc（）里面也有空格的问题出现

• 这个name可以直接在路由中添加，不用在vue页面里添加