Polymer中dom-repeat的DOM树元素数据缓存问题

我来帮你拆解这些关于dom-repeat和元素状态的问题，结合你用Firebase同步+Polymer组件的场景逐一说明：

1. dom-repeat处理元素增删的机制是怎样的？被删除元素的信息是否未完全清除？ #

dom-repeat默认采用**元素复用（recycling）**机制：当你删除数据项时，对应的DOM节点不会直接被销毁，而是被移到一个内部缓存池里；当新增数据项时，它会优先从缓存池里取出旧节点，只更新节点上绑定的数据（比如{{item}}、{{card.id}}），而不是创建全新节点。

这就是你遇到问题的核心：旧节点上残留的CSS状态（比如fadeOut类、动画状态）属于元素自身的非绑定状态，dom-repeat不会自动清除这些内容，所以新绑定的数据会“继承”旧节点的CSS状态。

被删除元素的绑定数据会被清空，但DOM节点本身、元素的内部状态（包括CSS、自定义属性、组件私有变量）都会保留在缓存池中，直到被复用或页面销毁。

2. 若删除10个元素中的第5个，第6-10个元素会被删除重建为第5-9个，还是仅被移动/修改？ #

这个结果取决于你是否给dom-repeat设置了key属性：

• 未设置key：dom-repeat按索引匹配数据和DOM节点。删除第5个数据项（索引4）后，原第6-10个对应的DOM节点会被保留，它们绑定的item会被更新为原第6-10个数据项，最后一个DOM节点会被移到缓存池。简单说：前面的节点复用并更新数据，不会删除重建，只有最后一个节点被回收。
• 设置了key（比如key="id"，用Firebase数据的唯一id）：dom-repeat会根据key值匹配数据和DOM节点。删除第5个数据项后，对应的DOM节点会被移到缓存池，剩下的第6-10个数据项对应的DOM节点会保持原位，仅更新必要的绑定数据，不会被修改或重建。这是更推荐的用法，能避免索引匹配带来的状态混乱。

3. 除CSS状态外，模板标签内还有哪些需注意的潜在问题？ #

除了CSS类/动画状态，这些场景也容易踩坑：

• 组件内部非绑定状态：比如my-element里的展开/折叠状态、用户输入的临时值，如果不是通过数据绑定维护的，复用节点时这些状态会残留到新数据项上。
• 手动添加的事件监听：如果在组件初始化时用addEventListener手动绑定了事件（而非Polymer的on-*语法），复用节点时这些监听不会自动移除，可能导致重复触发或内存泄漏。
• 手动修改的DOM属性：比如用setAttribute设置的自定义属性、直接修改的input.value等，这些不会被数据绑定覆盖，会保留在复用节点中。
• 第三方库实例：如果在组件里初始化了第三方库（比如图表、富文本编辑器），复用节点时这些实例不会被销毁，会和新数据项冲突，甚至引发报错。

4. 是否需要手动重置某些状态？ #

是的，必须手动处理复用节点的状态重置，推荐这几种方案：

• 监听dom-repeat的dom-change事件：在事件回调中找到新增/复用的元素，重置CSS状态和内部状态：

  this.addEventListener('dom-change', () => {
    this.shadowRoot.querySelectorAll('paper-card').forEach(card => {
      // 清除旧动画类，重置为初始状态
      card.classList.remove('fadeOut');
      card.classList.add('fadeIn');
    });
  });
  

• 在my-element中监听card属性变化：当组件绑定的card数据更新（即节点被复用时），主动重置内部所有状态：

  Polymer({
    is: 'my-element',
    properties: {
      card: {
        type: Object,
        observer: '_cardChanged'
      }
    },
    _cardChanged(newCard) {
      // 重置CSS状态
      this.$.card.classList.remove('fadeOut');
      // 重置组件内部私有状态
      this._isExpanded = false;
      this._tempInputValue = '';
    }
  });
  

• 给dom-repeat设置key属性：虽然不能直接重置状态，但能确保每个数据项对应固定的DOM节点，减少跨数据项的状态复用问题，尤其适合有唯一标识的数据（比如你的Firebase数据带id）：

  <template is="dom-repeat" items="{{items}}" key="id">
    <my-element card="{{item}}">
      <paper-card id="{{card.id}}">...</paper-card>
    </my-element>
  </template>
  

• 关闭元素复用（适合小量数据）：如果你的列表元素数量不多，可以设置recycle=false，让dom-repeat删除元素时直接销毁DOM节点，新增时创建全新节点，彻底避免旧状态残留，但会牺牲部分性能：

  <template is="dom-repeat" items="{{items}}" recycle="false">
    <!-- ... -->
  </template>
  

内容的提问来源于stack exchange，提问作者gerd hübner