如何在路由器更改之间回收/保留 Vue.js 组件？

Question

我正在使用 Vue.js 2.5.x 和 Nuxt 1.4。我相信这是一个与 vue-router 相关的问题。

我在两个不同的 Nuxt 页面上有相同的组件，我想在页面之间导航时保​​留在布局中（不仅仅是在内存中）。

从生命周期事件的角度来说，一些组件在布局中添加和删除，并触发创建、安装、卸载、销毁的整个生命周期。我了解 keep-alive 是如何工作的，以避免我们希望在布局中重新安装的组件的该过程的创建/销毁开销，这不是这里的问题。

相比之下，当路由改变时，简单的组件似乎根本不会被卸载，就好像 Vue 以某种方式理解这些组件将在两种不同的布局中显示相同，所以它不仅不会销毁/创建它们......布局，甚至不卸载它们。

我试图更好地了解在路由之间导航时允许当前页面的组件保持安装状态的条件。我发现的许多讨论都属于“为什么我的组件不刷新？”的性质。当路由更改发生时，但我实际上遇到了相反的问题：我想保留一个组件及其状态，但该组件正在被销毁。我已经将“key”显式设置为特定的共享值（通常为确保组件卸载而给出的相反建议），但似乎还有比这更深的东西。

同样，为了清楚起见，我不是指“保持活动”试图挂在内存中临时从布局中删除的组件上。我在这里观察并试图理解的似乎是一种不同的行为，其中 Vue 的某些部分将组件识别为两个布局之间的相同，并优化了此类组件的销毁和（重新）创建。这是一个巨大的优化，但在我能找到的任何地方似乎都没有讨论或记录其行为。

我有一个 Nuxt 布局，它在概念上是这样的……

默认.vue：

<template>
  <div>
    <my-marvelous-header-component />
    <nuxt/>
    <my-also-marvelous-footer-component />
  </div>
</template>

……我有几个 Nuxt 页面看起来像这样……

页-a.vue：

<template>
  <section id=mainContent>
    <wonderful-component id="wonder1" :key=321 />
    <complex-component-with-children :key=123 />
  </section>
</template>

页-b.vue：

<template>
  <section id=mainContent>
    <wonderful-component id="wonder1" :key=321 />
    <complex-component-with-children :key=123 />
  </section>
</template>

您会注意到这两个页面具有完全相同的组件，并且我尝试使用关键属性来唯一地标识它们，以便向 Vue 传达它们在渲染时是相同的生物。

当我使用 this.$router.push() 在这些页面之间导航时，我的页眉和页脚组件在路由导航中不受干扰（我通过在生命周期钩子中放置一些控制台输出来验证这一点），但是美妙和复杂的组件都被破坏了并且然后重新创建。

我试图回收的两个组件内部都有许多动态创建的子组件，因此 vdom 的状态将与初始页面的原始启动条件有很大不同。美妙或复杂的组件没有任何属性或从模板传递的任何其他数据……它们与上面的布局完全一样。我已经尝试为它们提供一个在模板之间共享的唯一 ID 或键值（以及什么都没有），但无论我尝试过什么，路由器推送都会导致这些组件销毁并重新渲染。

像我的页眉和页脚这样的琐碎组件可以很好地回收利用，我只是想让我的更复杂的组件也有同样的行为。

所以我的主要问题是，什么允许或阻止组件的回收？检查什么来确定组件是否可以回收？有没有办法在路由更改之间发出信号应保留/回收组件？如果不是，我必须在组件之外保留什么才能使其看起来像是在过渡中停留的候选者？

我原以为“key”属性在这里很神奇，但这似乎不起作用，不幸的是浏览 Vue.js 源代码发现这个词被广泛用于命名参数和局部变量......我相信有Vue 中有一个名为“patch()”的函数，它至少处理与新旧组件一致地更新 vdom，但坦率地说，其中的逻辑超出了我目前的 Vue 知识。如果对 Vue 内部结构有更好了解的人对代码的哪些部分可能有助于澄清我的想法有所了解，我很想再次深入研究。

我觉得我已经追了好几天了。任何想法或见解都非常感谢。

Answer 1

（不确定这些解释对你来说是否足够，但我只是想尝试回答它）

Vue 中使用的通用术语不是回收，而是称为keep-alive。这是您在研究此问题时想要使用的术语。

对于Nuxt来说，keep-alive似乎还不太靠谱。我建议你将所有数据保存在 Vuex 中，并根据 Vuex 中的数据渲染你的元素。

什么允许或阻止组件的回收？通过检查哪些内容来确定组件是否可以回收？

在这里考虑安装和卸载是很有用的。默认情况下，组件在卸载时总是被销毁。（除非keep-alive使用。）

在这个例子中，

<my-marvelous-header-component />
<nuxt/>
<my-also-marvelous-footer-component />

<nuxt/>是<router-view></router-view>Vue 路由器所在的位置。在路由更改时，只有内部的组件router-view会被安装/卸载。因此，在路线改变时，<my-marvelous-header-component />和<my-also-marvelous-footer-component />将保持不变并且不会被安装/卸载。

有没有一种方法可以表明组件应该在路线更改之间保留/回收？

在典型的（不是 Nuxt）Vue 项目中，它是通过<keep-alive>在<router-view>.

这是一个很好的例子：https ://jsfiddle.net/Linusborg/L613xva0/4/

<div id="app">
  ...
  <keep-alive include="foo">
    <router-view></router-view>
  </keep-alive>
</div>

但在 Nuxt 中，<router-view>是自动生成的，你将无法<keep-alive>像在普通 Vue 项目中那样应用它。

（再次）对于Nuxt来说，keep-alive似乎还不太可靠。我建议你将所有数据保存在 Vuex 中，并根据 Vuex 中的数据渲染你的元素。