javascript - 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> 的方式？应该起作用吗？我必须绑定(bind)到 is 吗？在 <component> 上如果我现在不想渲染它，就把它设置为空？是这样的吗？

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

这似乎混淆了那里实际发生的事情，如果它真的有效的话。还假设 SomeChildComponent的 Prop 可以带 false ，它可能无法做到。我不喜欢那个选项。我想稍微好一点的是将整个东西包装在 if 中阻止，也许？

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

当然，这是假设 <keep-alive> v-if 中的函数 block ，它可能不会。此外，它仍然不如第一种方式(行不通)那么清晰。我不喜欢设置 is至 ''除非那真的是唯一的方法。当然，这些选项都不允许更大的 block 由条件控制，只有元素保持事件状态。

刚刚花了两天的大部分时间试图找出原因 <keep-alive>无法让任何东西活着!希望我只是缺少一些简单的东西!

编辑:更新初始示例以更好地反射(reflect)我的用例。

Answer 1

I thought the purpose was to cache data associated with an component not currently being rendered in the DOM

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

According to this bug, is specifically designed to drop the cache it was holding when an element was removed from the page. So what am I missing?

从这个“错误”中可以看出“每当 <keep-alive> 组件被销毁时(因为它本身就在 v-if 中)，它会丢弃所有缓存的组件...”

Why would I want to use <keep-alive> with v-show? Isn't the whole point of v-show that the element still exists on the page, just has CSS set to hide it?

没错，正是v-show的重点将它与 <keep-alive> 一起使用是没有意义的(因为 v-show 不会导致组件被销毁/创建)

By default, does an element lose data when it's hidden with v-show?

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

To be clear, the follow example is apparently supposed to not work (according to the closed bug I linked anyway)

<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只是本地缓存，只有当它本身被“渲染”时才会工作。

Is there a way to rewrite this that would fit with how is supposed to function?

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

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

...所有其他变体都会失败，您可以在 this demo 中尝试查看

Docs

Note, <keep-alive> is designed for the case where it has one direct child component that is being toggled. When there are multiple conditional children, <keep-alive> requires that only one child is rendered at a time.

• 如果它有多个rendered child，它就不会工作
• 如果 child 不是一个组件(例如 <div )，它将不起作用