学习笔记——keep-alive缓存组件，再次返回组件data数据重置

前言：使用keep-alive缓存组件，当再次返回该组件后，希望其组件中的数据或状态，保持上次离开该组件时的情况。

---

一、当前组件树

  

 

 希望缓存HomeMain组件的状态。

二、错误处理

我在HomeMain的祖先组件HomeLayout中，写了如下代码：

<template>
  <div class="home-layout">
    <home-header></home-header>
    <el-scrollbar style="height: calc(100% - 60px); width: 100%">
      <keep-alive :include="['homeMain']">
        <router-view />
      </keep-alive>
    </el-scrollbar>
  </div>
</template>

在HomeMain组件中可以通过activated和deactivated等钩子函数判断HomeMain组件缓存了。但是当我点击跳转按钮进入ComponentLayout组件后，再次返回HomeMain组件后，其中data中的数据被重置了。

三、分析原因

如上图三张组件树所述，HomeLayout和ComponentLayout组件是同级组件，HomeMain组件是HomeLayout的子组件。在没有组件缓存的情况下，HomeLayout和ComponentLayout组件只能显示其中一个。所以当我们跳转到ComponentLayout组件后，再次返回HomeLayout组件，相当于重重新缓存了HomeMain组件，上一次的缓存结果被替换了。所以HomeMain组件中的数据一直保持初始化的状态。

四、解决方案

在HomeLayout和ComponentLayout组件的共同父组件中使用keep-alive组件：

<template>
  <div id="app">
    <keep-alive :include="['homeLayout']">
      <router-view />
    </keep-alive>
  </div>
</template>

五、总结

排查问题时，应该多多借助一些方便的工具，如：浏览器的控制台。

我排查问题的思路：1.首先在目标组件HomeMain中使用activated和deactivated等钩子函数，在函数中随便console.log点内容，控制台看看是否有输出。有：说明keep-alive没有写错。没有：就去找keep-alive的问题。2.通过chrome中的扩展程序Vue.js devtools，清晰直观的观察组件树，和组件的数据变化。点击切换组件时，发现HomeMain组件及其祖先组件没有被缓存。找到原因了，开始调整keep-alive组件位置，解决问题。找这类问题还有点麻烦，需要有点耐心。还需要多多努力敲代码，丰富自己的知识，提高自己解决业务的能力。