keep-alive组件

keep-alive组件

Created: Aug 25, 2020 10:51 PM
分类: 技术点
技术: keep-alive
文件: src/App.vue

这个是官网的简介

• Props：

  • include - 字符串或正则表达式。只有名称匹配的组件会被缓存。
  • exclude - 字符串或正则表达式。任何名称匹配的组件都不会被缓存。
  • max - 数字。最多可以缓存多少组件实例。

• 用法：

  <keep-alive> 包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。和 <transition> 相似，<keep-alive> 是一个抽象组件：它自身不会渲染一个 DOM 元素，也不会出现在组件的父组件链中。

  当组件在 <keep-alive> 内被切换，它的 activated 和 deactivated 这两个生命周期钩子函数将会被对应执行。

  我在使用这个组件的时候,是用vant做一个导航栏,当点击进去跳转到内容页面的时候在返回导航栏还是停留在首页,我想要保持之前的栏目不变

  这里用的是<keep-alive>,在正常的页面中,当跳转到新的页面中原来的页面组件就会销毁,为了性能,像保存之前的页面怎么办?vue提供这种方式,就是缓存这个状态

  怎么使用

  <!--    判断有没有状态-->
      <keep-alive>
        <router-view v-if="$route.meta.keepalive"/>
      </keep-alive>
  

  只需在标签外面包裹这个组件就可以了,他会改变里面组件的生命周期

  也就是

  被keepalive包含的组件不会被再次初始化，也就意味着不会重走生命周期函数
  但是有时候是希望我们缓存的组件可以能够再次进行渲染，这时 Vue 为我们解决了这个问题
  被包含在 keep-alive 中创建的组件，会多出两个生命周期的钩子: activated 与 deactivated：

  • activated 当 keepalive 包含的组件再次渲染的时候触发
  • deactivated 当 keepalive 包含的组件销毁的时候触发

  keepalive是一个抽象的组件，缓存的组件不会被 mounted,为此提供activated和deactivated钩子函数

  例如在这里监听钩子函数,如果改变立即调用

  activated() {
      if (localStorage.getItem('newCat')){
        let newCat=JSON.parse(localStorage.getItem('newCat'))
        this.changeCategory(newCat)
      }