Polymer 2 中只有就绪生命周期回调会触发

Question

当我创建一个 Polymer 2.0 元素时，似乎只有 ready 生命周期回调被触发，我不明白为什么。例如，我有这个 Polymer 元素：

<link rel="import" href="../../bower_components/polymer/polymer-element.html">

<dom-module id="flip-four-board">
    <script>
        class FlipFourBoard extends Polymer.Element {            

            static get is() { return "flip-four-board"; }

            created() {
                super.created();
                console.log("created");
            }

            ready() {
                super.ready();
                console.log("ready");
            }

            attached() {
                super.attached();
                console.log("attached");
            }

            detached() {
                super.detached();
                console.log("detached");
            }

        }

        customElements.define(FlipFourBoard.is, FlipFourBoard);
    </script>

</dom-module>

但是当我将它插入到这样的页面中时：

<!DOCTYPE html>
<html>
<head>
    <title>Flip Four Board Tests</title>
    <script src="../../../bower_components/webcomponentsjs/webcomponents-lite.js"></script>
    <link rel="import" href="../../../bower_components/polymer/polymer.html">
    <link rel="import" href="../flip-four-board.html">
    <style type="text/css">
        html, body {
            width: 95%;
            height: 95%;
        }
    </style>
</head>
<body>
    <flip-four-board></flip-four-board>
</body>
</html>

控制台只显示：

为什么只有 ready 回调触发？

Answer 1

Polymer 2.0 引入了几个 lifecycle callback changes，包括在基于 class 的元素定义中替换除一个原始回调（即 ready）之外的所有回调。在 2.0 中使用 Polymer 工厂方法时，遗留回调仍然可用。

      1.x (legacy)    |      2.x
----------------------|-----------------------------
    created           |   constructor
    attached          |   connectedCallback
    detached          |   disconnectedCallback
    attributeChanged  |   attributeChangedCallback
    ready             |   ready

因此，您的 class 应该类似于：

class FlipFourBoard extends Polymer.Element {

  static get is() { return "flip-four-board"; }

  constructor() {
    super();
    console.log("created");
  }

  ready() {
    super.ready();
    console.log("ready");
  }

  connectedCallback() {
    super.connectedCallback();
    console.log("attached");
  }

  disconnectedCallback() {
    super.disconnectedCallback();
    console.log("detached");
  }

}

demo

Polymer 2 中只有就绪生命周期回调会触发

Only ready lifecycle callback fires in Polymer 2

lifecycle

web-component

polymer

polymer-2.x