Question

这有效：

App.vue

<template>
  <div id="app">
  <keep-alive including="home">
    <router-view />
  </keep-alive>
  </div>
</template>

router.vue

 routes: [
     {
     path: "/",
     name: "home",
     component: homeView
   },

这似乎正在按预期缓存整个homeView组件。但是，如果删除它并在homeView组件本身中添加keep-alive，它不会缓存我尝试缓存的单个组件。

我要执行的操作不是缓存整个视图，而是仅缓存该视图的单个组件。因此，我只想缓存NewComponent，而不是缓存homeView。

homeView.vue

<template>
    <div id="vue-main">
    <NavBar></NavBar>
    <h1><b>Home</b></h1>
        <transition name="fade" appear mode="out-in">
          <keep-alive>
            <NewComponent @loading=updateLoading></NewComponent>
          </keep-alive>
        </transition>
    <Footer></Footer>
    </div>
</template>

<script>
import NavBar from "../NavBar.vue";
import NewComponent from "../NewComponent.vue";

export default {
  name: "homeView",
  data () {
    return {
      loading: true,
    }
  },
  components: {
    NavBar,
    NewComponent
  },
  methods: {
    updateLoading(val) {
      this.loading = !val;
    },
  },
};
</script>

如何缓存NewComponent？为什么允许我缓存home而不允许NewComponent？

Answer 1

我不确定这是否可以帮助您达到预期的效果，但是我可以向您解释一下keep-alive的工作原理。

keep-alive是一个组件。您可以在此处查看其源代码：

https://github.com/vuejs/vue/blob/3b8925bc7973bb71b33374281db10a945ca9854e/src/core/components/keep-alive.js#L53

看起来可能有些陌生，但需要注意的关键部分是created钩子。在其中创建一个将用于存储子代的缓存。缓存位于特定的keep-alive组件实例上。

因此，为了使孩子能够从keep-alive中受益，必须保留keep-alive组件本身。缓存不在实例之间共享，而是在特定的keep-alive实例本地。

所以回到问题模板：

<keep-alive>
  <NewComponent @loading=updateLoading></NewComponent>
</keep-alive>

如果使用NewComponent删除了v-if，则keep-alive会将其保留在其缓存中，为v-if翻转回true做好准备。但是，如果您在页面之间导航，则整个homeView将被破坏，包括keep-alive组件及其缓存。

为什么我可以缓存导入了多个组件但不能仅缓存单个子组件的组件？

1 个答案: