如何让Polymer shop-app的connectedCallback仅执行一次？

嘿，我懂你现在的困扰——shop-app外壳的connectedCallback居然跑了7次，这绝对不是你想要的效果！别担心，这种情况在Polymer里挺常见的，一般是元素被多次附加到DOM树（比如路由切换、模板重新渲染、元素被移动位置等）导致的。下面给你几个靠谱的解决办法，确保你的代码只执行一次：

方法一：添加执行标志位（最常用） #

我们可以在元素内部加个布尔变量，标记初始化逻辑是否已经执行过。第一次触发connectedCallback时运行代码，之后直接跳过：

class ShopApp extends PolymerElement {
  static get is() { return 'shop-app'; }

  constructor() {
    super();
    // 初始化标志位，标记是否已执行过初始化逻辑
    this._hasRunInit = false;
  }

  connectedCallback() {
    // 必须调用父类的connectedCallback，不然会破坏Polymer的生命周期逻辑
    super.connectedCallback();
    
    if (!this._hasRunInit) {
      this._hasRunInit = true;
      console.log('ready');
      // 把你的AJAX调用逻辑放在这里，比如：
      // this._fetchData();
    }
  }

  // 示例AJAX请求方法
  _fetchData() {
    // 写你的AJAX请求代码
  }
}
customElements.define(ShopApp.is, ShopApp);

这个方法简单直接，能确保只有第一次元素连接到DOM时，你的初始化代码（包括AJAX调用）才会运行。

方法二：利用Polymer的ready()方法（无需等待DOM连接时用） #

如果你不需要等到元素完全连接到DOM才执行代码，而是元素第一次创建时就运行，那可以用Polymer的ready()方法。这个方法只会在元素实例创建时执行一次，不管它被附加到DOM多少次：

class ShopApp extends PolymerElement {
  static get is() { return 'shop-app'; }

  ready() {
    super.ready();
    console.log('ready');
    // 在这里放你的AJAX调用逻辑
  }
}
customElements.define(ShopApp.is, ShopApp);

不过要注意：ready()执行时，元素可能还没被添加到DOM树里，如果你需要操作DOM或者依赖DOM环境，还是用第一种方法更稳妥。

额外提醒 #

一定要记得调用父类的connectedCallback()或者ready()方法（比如super.connectedCallback()），否则Polymer内部的生命周期逻辑会出问题，引发更多奇怪的bug！

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