Polymer JS：将项目前置到Array属性是否会重新呈现整个UI？

Question

我的组件中包含以下模板标记

<template is="dom-repeat" items="{{values}}">
    <div><span>{{item.msg}}</span></div>
</template>

此组件具有属性值，即对象数组。

现在我想将item添加到此数组属性以响应事件。聚合物是否会重新渲染这个完整的UI，抛弃现有的DOM元素，因为所有现有元素都会被索引1压低？如果是这样，我可以实现哪些优化来避免DOM重新渲染，这在Array变大时可能会很昂贵。

Answer 1

简短的回答是否定的。

它不是关于Polymer，关于dom-repeat。

关于dom-repeat行为，您可以从github看到。

简单来说，每个渲染

• 创建索引数组以应用排序和过滤功能

• 循环实例数组（来自templatize函数的对象），如果已存在（从之前的渲染中），则为其分配项目

• 如果没有，请创建一个新的，推送到数组并插入父节点。

• 如果已超出实例，请将其删除。

请参阅__applyFullRefresh。

是的，它重用现有的DOM元素。

正如我所说，这是关于dom-repeat。您应该看到iron-list以更好的效果执行类似的操作，或者以您希望的方式自行创建。