Question

我见过人们在“ready”函数上添加事件监听器，在“connectedCallback”上添加其他人。我的问题是，每个地方的利弊是什么？在连接时，我们有责任将其删除;准备好了，它会留在那里，我不确定这是不是一个问题。

我应该这样做：

true

或者这个：

connectedCallback() {
    super.connectedCallback();
    this.addEventListener('click', this.myFunction.bind(this));
}

disconnectedCallback() {
    super.disconnetedCallback();
    this.removeEventListener('click', this.myFunction);
}

Answer 1

直到Polymer 1.x.whatever，一个元素生命周期中的ready回调被调用，一次

元素注册了它的影子DOM
发布了<content>个

然后发布ready，attached被解雇

所以，在一切确实准备

之后，您可能已经使用ready作为一次性回调

在Polymer 2.0开始之后，已经有合同更改了回调的触发方式，并且

ready回调不再保证在新的<slots>分发后执行，这意味着，不能确保ready本身将等待内容/轻量级DOM分发。
attached现在是新的connectedCallback，对于元素级DOM操作非常有用，例如设置属性，附加子等。这是在插槽节点之后发生的生命周期更改分布式，元素本身附加在DOM层次结构中，但在绘制后必须不。

因此，对于不依赖任何::slotted内容的任何事件，请使用ready回调

对于需要了解所有分布式内容以及shadow DOM的任何内容，请使用connectedCallback

但是，如果可能，请在元素的回调中使用超类afterNextRender的{{1}}方法添加事件侦听器

这些是我可能想到的。

所有这些以及更多，如果有帮助，here

我还没有读过关于我们必须从生命周期回调中删除事件监听器的事情，或其他任何事情。

如果您指的是元素本身可以动态连接和断开连接的情况，

并且，考虑到这一点，您在元素的生命周期回调中的全局/本机元素上添加了一个事件监听器，

喜欢在Polymer window或custom-element内的ready附加事件监听器，

只有在这种情况下，聚合物才会建议您删除 connectedCallback上的事件监听器

Polymer 2.0：事件监听器在哪里是添加它的理想位置？

1 个答案: