Polymer 2.0移除观察数组元素时出现异常行为求助

嘿，我帮你梳理了这个Polymer 2.0的问题，先把复现的核心代码贴出来：

<base href="https://polygit.org/polymer+polymer+v2.0.0-rc.2/webcomponentsjs+webcomponents+:master/components/">
<script src="webcomponentsjs/webcomponents-lite.js"></script>
<link rel="import" href="polymer/polymer-element.html">
<link rel="import" href="polymer/lib/elements/dom-repeat.html">

<dom-module id="root-element">
  <template>
    <style>
      :host { display: block; }
    </style>
    <div>
      <template is="dom-repeat" items="{{items}}">
        <div>{{item.name}}</div>
      </template>
    </div>
  </template>
  <script>
    class RootElement extends Polymer.Element {
      static get is() { return 'root-element'; }
      static get properties() {
        return {
          items: {
            type: Array,
            value: () => [
              {name: 'Item 1'},
              {name: 'Item 2'},
              {name: 'Item 3'}
            ]
          }
        };
      }
    }
    customElements.define(RootElement.is, RootElement);
  </script>
</dom-module>

<root-element></root-element>

从代码和Polymer 2.0常见的坑点来看，你大概率遇到的是**dom-repeat无法响应数组变化，导致视图不更新**的问题。这是因为Polymer 2.0的响应式系统依赖特定的数组操作方式，直接用原生数组方法修改数据不会触发视图更新。

具体解决办法： #

• 使用Polymer提供的数组操作API：
  当你需要添加、删除或修改数组元素时，一定要用元素实例上的方法，而非原生数组方法：

  // 添加新元素
  this.push('items', {name: `New Item ${this.items.length + 1}`});
  
  // 删除指定索引的元素（比如删除第1个元素）
  this.splice('items', 0, 1);
  
  // 修改数组中某个对象的属性
  this.set('items.1.name', 'Updated Item 2');
  

• 避免数组引用共享：
  在properties里初始化数组时，要保持用函数返回新数组（就像你代码里的value: () => []写法），不要直接写value: []，否则多个元素实例会共享同一个数组引用，引发奇怪的渲染问题。
• 手动触发更新（应急方案）：
  如果不得不直接修改数组（比如和第三方库交互），可以调用notifyPath强制Polymer更新视图：

  this.items.push({name: 'Directly Added'});
  this.notifyPath('items', this.items);
  

另外，你当前使用的是Polymer 2.0的RC版本，建议升级到稳定版，RC版本里可能存在一些已修复的bug，能避免不少不必要的麻烦。

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