keep-alive是什么

keep-alive是什么？

keep-alive 标签：是Vue的内置组件，能在组件切换过程中将状态保留在内存中，取消组件的销毁函数，防止重复渲染DOM。

• 当用它包裹 时，会缓存不活动的组件实例，而不是销毁它们。
• 和 相似，它自身不会渲染一个 DOM 元素。
• 使用 组件后即可使用 activated() 和 deactivated() 这两个生命周期函数

应用场景？

例如我们将某个列表类组件内容滑动到第100条位置，那么我们在切换到一个组件后再次切换回到该组件，该组件的位置状态依旧会保持在第100条列表处
被keep-alive包裹的动态组件或router-view会缓存不活动的实例，再次被调用这些被缓存的实例会被再次复用，对于我们的某些不是需要实时更新的页面来说大大减少了性能上的消耗，不需要再次发送HTTP请求，但是同样也存在一个问题就是被keep-alive包裹的组件我们请求获取的数据不会再重新渲染页面，这也就出现了例如我们使用动态路由做匹配的话页面只会保持第一次请求数据的渲染结果，所以需要我们在特定的情况下强制刷新某些组件

keep-alive 使用语法

1.利用include、exclude属性

   <keep-alive include="bookLists,bookLists">
      <router-view></router-view>
</keep-alive>
<keep-alive exclude="indexLists">
      <router-view></router-view>
</keep-alive>

include属性表示只有name属性为bookLists，bookLists的组件会被缓存，（注意是组件的名字，不是路由的名字）其它组件不会被缓存exclude属性表示除了name属性为indexLists的组件不会被缓存，其它组件都会被缓存
2.利用meta属性
router.js文件

   export default[
 {
     
  path:'/',
  name:'home',
  components:Home,
  meta:{
     
    keepAlive:true //需要被缓存的组件
 },
 {
     
  path:'/book',
  name:'book',
  components:Book,
  meta:{
     
     keepAlive:false //不需要被缓存的组件
 } 
]

<keep-alive>
  <router-view v-if="this.$route.meat.keepAlive"></router-view>
  <!--这里是会被缓存的组件-->
</keep-alive>
<keep-alive v-if="!this.$router.meta.keepAlive"></keep-alive>
<!--这里是不会被缓存的组件-->

返回到上次浏览位置

在被缓存的组件中，
在deta里添加一个用于记录位置的数据scrollY：

  data() {
     
    return {
     
        scrollY:0
    };
  },

添加keep-alive相关生命周期函数：

 activated(){
     	//进入时读取位置
    document.body.scrollTop = this.scrollY
    document.documentElement.scrollTop = this.scrollY;
  },
  deactivated(){
     	//离开时记录位置
    this.scrollY = document.body.scrollTop;
  },

如果有需要使进入的新页面的滚动条位置 初始化置顶，即指定单个页面的滚动条位置
可在新页面组件中的mounted生命周期函数中添加

 mounted(){
      //初始化滚动条置顶
    document.body.scrollTop = 0;
    document.documentElement.scrollTop = 0;
  }