卸载 Polymer 页面答案

【问题标题】：Unloading Polymer pages卸载 Polymer 页面
【发布时间】：2017-07-04 08:27:00
【问题描述】：

我一直在将 Polymer 与 Redux 和 Polymer (2.0) 入门套件结合使用，其中引入了 iron-pages 组件以及其中包含的页面的延迟加载。

但是，我注意到它们实际上并不是这样的页面，而更像是老式的tab bar，所有内容都加载到 DOM 中，但使用 CSS 隐藏。 connectedCallback() 生命周期方法被调用，但disconnectedCallback() 不是因为组件从不卸载。

这对我来说就像是内存和性能泄漏。我们将实现的一个用例是通过 websockets 频繁更新一条数据；我想避免的是它在后台更新。对于台式机，我想这还可以，但对于移动设备，性能会很糟糕。

其次，我宁愿不必实施手动生命周期管理； NIH 的味道。

那么，归结为：Polymer 和/或分页 Web 组件中是否存在组件卸载或可靠的生命周期回调？

编辑：我看到Unloading Polymer pages 也有同样的问题 - 但没有答案。

编辑 2：我看到 iron-pages 上也有关于此的问题。

【问题讨论】：

【解决方案1】：

正如相关问题所说，您可以使用带有 restamp 属性的条件模板 (<template is="dom-if">)。使用restamp，当条件为假时元素会被移除，所以你的disconnectedCallback 会被调用。

您可以使用一组 dom-if 模板代替 iron-pages 元素。

正如您所指出的，iron-pages 元素更像一个选项卡面板，当底层视图相对较轻，或者您希望人们频繁来回切换并且不想支付重新创建它们。但是，在许多情况下，当元素占用大量内存或（如您的情况）只要它们在页面上就可以工作，那么条件模板就是要走的路。

【讨论】：