Vuejs的要点 ？

Question

基本上，它说的是。 <keep-alive>的意义是什么？这听起来可能很愚蠢，但是我认为目的是缓存与DOM中当前未呈现的组件关联的数据。根据this bug/issue，<keep-alive>被设计为在从页面中删除元素时删除其持有的缓存。那我想念什么？为什么我要在<keep-alive>中使用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>应该如何工作？是否需要绑定到is上的<component>并将其设置为空，如果我现在不希望其呈现？像这样吗？

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

这似乎掩盖了实际发生的事情，即使它确实可行。还要假设SomeChildComponent的道具可以取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中当前未呈现的组件相关联的数据