keep-alive

keep-alive是什么

是vue的内置组件,能在组件切换过程中将状态保留在内存中,取消组件的销毁函数,防止重复渲染Dom.
当包裹时,会缓存不活动的组件实例,而不是销毁他们
使用组件后即可使用 avtivated()和deactivated()这两个生命周期函数

应用场景

当我们购买商品的时候,点击进入详情页,在返回出来,如果没有使用keep-alive会回到顶部,如果使用keep-alive会回到点击的位置

keep-alive使用语法

利用include、exclude属性

include

   <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的组件不会被缓存，其它组件都会被缓存

返回到上次浏览位置

在被缓存的组件中，
在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;
  },