keep-alive

keep-alive 参考文档

• Props：

  • include - 字符串或正则表达式。只有名称匹配的组件会被缓存。

  • exclude - 字符串或正则表达式。任何名称匹配的组件都不会被缓存。

  • max - 数字。最多可以缓存多少组件实例。

• 用法：

  包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。

  是一个抽象组件：它自身不会渲染一个 DOM 元素，也不会出现在组件的父组件链中。

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

  在 2.2.0 及其更高版本中，activated 和 deactivated 将会在 树内的所有嵌套组件中触发。

实现步骤

1. 给app.vue中的添加keep-alive组件，并通过include来决定缓存哪些页面

2. 在文章列表页加载的时候监听元素滚动事件，记录当前浏览的滚动条的高度

data () {
    + scrollTop: 0 // 列表滚动的高度
}

mounted () {
    // 当页面加载的时候监听列表元素的滚动事件，把列表的滚动高度记录下来
    const articleList = this.$refs['article-list']
    articleList.onscroll = () => {
      this.scrollTop = articleList.scrollTop
    }
  }

3. 然后在切换到缓存的组件时，在activated钩子函数中把高度设置为保存的高度

activated () {
    // activated生命周期函数 被 keep-alive 缓存的组件激活时调用。
    // 该钩子在服务器端渲染期间不被调用。
    // 把记录的到顶部的距离重新设置回去
    this.$refs['article-list'].scrollTop = this.scrollTop
  }

4. 此时发现连个人中心也被缓存了，需要把个人中心排除掉，通过路由的meta属性来定义需要加keep-alive组件的路由

   {
       path: '', // 默认子路由，只能有1个
       name: 'home',
       component: () => import('@/views/home'),
       meta: {
        keepAlive: true
       }
   },
   

   然后在app.vue根组件判断一下需要缓存的组件

5. 既然通过不同的路由地址来实现缓存，那么此时include="LayoutIndex"就没有意义了，而且去掉之后像问答，视频的模块也不会被缓存了。

6. 继续优化，给第2步监听滚动条位置事件，增加防抖

   import { debounce } from 'lodash'
   
   mounted () {
       // 当页面加载的时候监听列表元素的滚动事件，把列表的滚动高度记录下来
       const articleList = this.$refs['article-list']
       articleList.onscroll = debounce(() => {
         console.log(articleList.scrollTop)
         this.scrollTop = articleList.scrollTop
       }, 100)
     }
   

最终的代码：

app.vue

router/index.js

   {
           path: '', // 默认子路由，只能有1个
           name: 'home',
           component: () => import('@/views/home'),
           meta: {
             keepAlive: true
           }
         }

views/home/components/article-list.vue

   import { debounce } from 'lodash'
   
   data () {
       return {
    ...
         scrollTop: 0 // 记录滚动条的高度
       }
     }
   // 当缓存组件被激活的时候触发
   activated () {
       this.$refs['article-list'].scrollTop = this.scrollTop
     },
         
     mounted () {
        // 获取文章列表容器的引用对象
       const articleList = this.$refs['article-list']
       articleList.onscroll = debounce(() => {
         // console.log(articleList.scrollTop)
         this.scrollTop = articleList.scrollTop
       }, 50)
     },