Vue keep-alive 失效

<el-tabs v-model="activeName">
      <el-tab-pane v-if="access('home')" label="home" name="home">
          <Home v-if="activeName ==='home'" />
      </el-tab-pane>
      <el-tab-pane v-if="access('user')" label="user" name="user">
          <User v-if="activeName ==='user'" />
      </el-tab-pane>
    </el-tabs>

页面缓存了，但是没有Home和User组件没有生效，把v-if替换成v-show就可以了。
原因就是跟生命周期的执行顺序有关，access('home')是通过接口异步请求是否展示当前tab，keep-alive标签只会缓存在生命周期钩子（created或者mounted）model数据，access('home')返回的异步数据肯定晚于生命周期钩子执行顺序。

<el-tabs v-model="activeName">
      <el-tab-pane v-show="access('home')" label="home" name="home">
        <keep-alive>
          <Home v-if="activeName ==='home'" />
        </keep-alive>
      </el-tab-pane>
      <el-tab-pane v-show="access('user')" label="user" name="user">
          <keep-alive>
            <User v-if="activeName ==='user'" />
          </keep-alive>
      </el-tab-pane>
    </el-tabs>

默认activeName是 home，所以，Home组件会创建，User组件不会，所以两个组件都要加上keep-alive
不知道对不对，先记录了。