聚合物生命周期:为什么属性尚未从'附件'回调

Polymer Lifecycle: Why are properties not yet loaded from DOM attributes at 'Attached' callback?

本文关键字：回调 附件 周期 生命 为什么 属性 聚合物      更新时间：2023-09-26

我很难理解聚合物元素的生命周期。

假设我有一个具有单个属性fooBar的自定义元素。假设我像这样设置fooBar作为属性上的属性

<custom-element foo-bar="text"></custom-element>

现在假设我想在元素生命周期创建期间以编程方式使用fooBar作为属性。所以有点像。

Polymer({
    is: "custom-element",
    properties: {
        fooBar: {type: String}
    },
    ready: function(){
        console.log(this.fooBar)
    }, 
    attached: function(){
        console.log(this.fooBar)
    }
})

据我所知，元素属性fooBar直到调用了ready和attached之后才从DOM属性fooBar加载。即使我从准备好的和附加的回调内部调用async，这也是正确的。

有人能解释一下（1）元素属性在生命周期中从DOM属性导入的位置吗？（2）如何以编程方式访问这些属性来对元素进行一些设置工作？

如果您已经阅读过自定义元素规范，那么在元素的生命周期中有一个名为attributeChangedCallback(name, oldVal, newVal)的回调，它在Polymer中方便地重命名为attributeChanged(type, name)。但是，这不是侦听属性的首选方式，而是将一个观察者附加到该属性，在本例中是在fooBar上。

这是一个jsbin示例。您可以看到fooBarChanged在attached和ready之前被首先调用。

http://jsbin.com/gibopu/edit?html，控制台，输出

相关文章：