如何在 Vaadin 中有效地呈现子元素的动态列表答案

【问题标题】：How to efficiently render a dynamic list of subelements in Vaadin如何在 Vaadin 中有效地呈现子元素的动态列表
【发布时间】：2019-09-21 09:34:30
【问题描述】：

给定一个 Vaadin 应用程序，用户可以在其中添加和删除也在浏览器中呈现的列表的元素，我想知道处理此类操作的最有效方法是什么。目前，我只是使用add 和remove 方法。

我只对 Apache Wicket 有经验，出于性能原因，应该避免操作组件树。在文档中，我只找到了关于如何处理 repeated elements in Polymer 的部分，但没有找到关于如何使用“简单”API 完成此操作的部分。

我选择了正确的方法吗？

【问题讨论】：

标签： vaadin vaadin-flow

【解决方案1】：

Vaadin UI 代码在服务器上运行，因此添加/删除操作不会直接影响 DOM。当响应被发送回浏览器时，Vaadin 将查看之前的 UI 状态和当前状态之间的差异，并向浏览器客户端发送适当的指令以更新 DOM。在这种情况下，指令类似于“删除以下组件：...”。实际的 DOM 操作由 Vaadin 处理，您不能影响自己。

如果您遇到性能问题，请通过在 GitHub 上提交问题单来帮助我们，以便我们查看 https://github.com/vaadin/flow/issues

【讨论】：