如何创建可在多标签页共用的单例Vaadin Combobox组件

首先明确Vaadin框架的底层规则：所有UI组件实例同一时间只能归属一个父容器，当你把同一个组件实例添加到多个容器时，框架会自动将该组件从之前的父容器中移除，因此你尝试共享组件单例的方案从原理上就不可行，不可能实现单个组件实例同时在多个标签页渲染。

你的内存开销核心来自于Combobox承载的列表数据，而非组件本身，因此可以换个优化思路：不共享组件实例，只共享数据源，具体实现如下：

• 共用全局唯一的DataProvider实例
  Combobox组件本身的内存占用极低，三个实例的总开销可以忽略不计，你只需将加载好的列表数据封装为单例的DataProvider，三个标签页的Combobox分别实例化后绑定同一个DataProvider即可，列表数据只会在内存中存储一份，不会出现重复占用的问题。
  参考代码：

  // 全局初始化一次数据提供器，全应用共用
  private static final DataProvider<YourOption, String> GLOBAL_OPTION_PROVIDER = 
      DataProvider.ofCollection(yourBigOptionList);
  // 也可使用懒加载DataProvider，进一步降低全量数据加载的内存开销
  
  // 每个标签页初始化Combobox时直接绑定公用数据源
  ComboBox<YourOption> tagCombo = new ComboBox<>();
  tagCombo.setDataProvider(GLOBAL_OPTION_PROVIDER);
  

• 局部状态隔离
  不同标签页的Combobox如果需要独立的选中值、过滤规则等个性化配置，直接在各自的组件实例上设置即可，这些状态存储在组件实例中，和共享的数据源互不影响，不会出现状态串扰的问题。
• 超大数据量补充优化
  如果你的列表数据量超过1万条，建议直接使用懒加载DataProvider，不需要提前加载全量数据到内存，Combobox会根据用户滚动的位置动态拉取对应页的数据，内存占用会进一步降低到KB级别。

内容的提问来源于stack exchange，提问作者buck