聚合物2中只有就绪生命周期回调触发
Mic*_*ael 6 lifecycle web-component polymer polymer-2.x
当我创建一个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回调解雇？
ton*_*y19 22
Polymer 2.0引入了几个生命周期回调更改,包括在ready基于类的元素定义中替换除原始回调之外的所有回调(即).Polymer在2.0中使用工厂方法时,旧的回调仍然可用.
1.x (legacy) | 2.x
----------------------|-----------------------------
created | constructor
attached | connectedCallback
detached | disconnectedCallback
attributeChanged | attributeChangedCallback
ready | ready
所以,你的类看起来应该类似于:
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");
}
}