Vuejs <keep-alive> 的重点是什么？

Question

基本上，它说的是什么。重点是<keep-alive>什么？这听起来可能很愚蠢，但我认为目的是缓存与当前未在 DOM 中呈现的组件关联的数据。根据这个bug /问题，<keep-alive>是专门设计来降时的元素从网页上删除原持有的缓存。那么我错过了什么？

我为什么要使用<keep-alive>with v-show？v-show元素仍然存在于页面上的全部意义不是，只是设置了 CSS 来隐藏它？默认情况下，元素在使用v-show?隐藏时会丢失数据吗？

需要明确的是，以下示例显然应该不起作用（根据我无论如何链接的已关闭错误/问题）：

<div v-if="lazyLoaded && userClickedToShow">
    <h2>{{someLazyLoadedData.title}}</h2>
    <div id="otherStuff">
        ...
    </div>
    <keep-alive>
        <some-child-component :prop="someLazyLoadedData"></some-child-component>
    </keep-alive>
</div>

所以我本来希望<keep-alive>在这种情况下会缓存与<some-child-component>加载后的数据相关联的数据，如果用户点击显示（也许出于性能原因，我不希望在 DOM 中有很多数据，除非用户特别点击以显示它，或其他）它会切换显示，但保留搜索词或组件中发生的任何事情。

有没有办法重写这个符合<keep-alive>应该如何运作的？如果我现在不想渲染它，我是否必须绑定到isa<component>并将其设置为空？像这样的东西？

<keep-alive>
    <component :is="lazyLoaded && userClickedToShow ? 'SomeChildComponent' : ''" :prop="lazyLoaded && someLazyLoadedData"></component>
<keep-alive>

这似乎混淆了那里实际发生的事情，如果它甚至有效的话。还假设 thatSomeChildComponent的 prop 可以 take false，它可能无法接受。我不喜欢那个选项。稍微好一点我想是将整个东西包裹在一个if块中，也许？

<div v-if="lazyLoaded">
    <keep-alive>
        <component :is="userClickedToShow ? : 'SomeChildComponent' : ''" :prop="someLazyLoadedData"></component>
    <keep-alive>
</div>

当然，这假设<keep-alive>在一个v-if块内起作用，但它可能不是。此外，它仍然不如第一种方式清晰（这不起作用）。我不喜欢设置is为，''除非这真的是唯一的方法。当然，这些选项都不允许更大的块由条件控制，只有元素保持活动状态。

只是花了两天的大部分时间试图找出为什么<keep-alive>无法让任何东西保持活力！希望有一些简单的东西我只是想念！

编辑：更新初始示例以更好地反映我的用例。

Answer 1

我认为目的是缓存与当前未在 DOM 中呈现的组件关联的数据

不，它不会缓存组件的数据。它缓存整个组件实例（包括它的整个状态）。简单地说，它使组件实例存活而不是被销毁......

根据此错误，专门设计用于在从页面中删除元素时删除它所持有的缓存。那么我错过了什么？

从这个“错误”中得出的观点是“每当<keep-alive>组件被破坏（因为它本身在里面v-if），它就会丢弃所有缓存的组件......”

我为什么要使用<keep-alive>with v-show？v-show元素仍然存在于页面上的全部意义不是，只是设置了 CSS 来隐藏它？

是的，这正是重点，v-show使用它没有任何意义<keep-alive>（因为v-show不会导致组件被破坏/创建）

默认情况下，元素在使用v-show?隐藏时会丢失数据吗？

不，隐藏的组件v-show仍然存在于内存、组件树和 DOM 中并保持其状态....

需要明确的是，以下示例显然不应该工作（根据我无论如何链接的已关闭错误）

<div v-if="lazyLoaded && userClickedToShow">
    <keep-alive>
         <some-child-component :prop="someLazyLoadedData"></some-child-component>
    </keep-alive>
</div>

...是的，它不起作用，因为：

1. v-if === false<keep-alive>如果组件先前已渲染，则将销毁该组件（但它并不完全正确，因为它<keep-alive>是“无渲染”的，因为它仅提供功能并且不向 DOM 渲染任何内容，除了它的子组件）。
2. 并且v-if === true将创建<keep-alive>和渲染它的子组件

为了使其工作，你需要移动<keep-alive>以外的v-if：

<keep-alive>
    <some-child-component v-if="lazyLoaded && userClickedToShow" :prop="someLazyLoadedData" />
</keep-alive>

上面的代码会导致some-child-component渲染（并把里面<keep-alive>的缓存在同一时间）时的结果v-if条件true。当v-if切换到 时false，组件的模板会从 DOM 中移除，但组件保留在缓存中而不是被销毁。

v-if(连同<keep-alive>) 和v-show在这种情况下的主要区别在于，使用v-if/keep-alive组合时，组件实例保存在内存中，但其模板的结果不是 DOM 的一部分，而对于v-show组件是活动的，它呈现的相应 HTML 是DOM 的一部分（只是隐藏）

并回答您的问题......<keep-alive>主要是为动态组件的 ( <component :is="" >) 和 Vue-router 特别设计......

更新（...因为有问题的更新代码）

<div v-if="lazyLoaded && userClickedToShow">
    <h2>{{someLazyLoadedData.title}}</h2>
    <div id="otherStuff">
        ...
    </div>
    <keep-alive>
        <some-child-component :prop="someLazyLoadedData"></some-child-component>
    </keep-alive>
</div>

由于与第一个示例相同的原因，此代码将无法按预期工作 - 如果keep-alive被破坏（由于v-if条件评估为false），它将删除所有缓存的组件。keep-alive只是本地缓存，只有当它本身被“渲染”时才会工作。

有没有办法重写这个符合应该如何运作的？

您最好的选择是将您想要“切换”的所有内容包装到单个组件中，然后像这样使用该组件：

<keep-alive>
  <my-component v-if="lazyLoaded && userClickedToShow" :prop="someLazyLoadedData" />
</keep-alive>

...所有其他变体都将失败，您可以在此演示中尝试查看

文档

请注意，<keep-alive>专为具有一个正在切换的直接子组件的情况而设计。当有多个条件孩子时，<keep-alive>要求一次只渲染一个孩子。

• 如果它有多个渲染的孩子，它将不起作用
• 如果孩子不是组件（例如<div），它将不起作用