当属性设置为新值时，LitElement获取更新的属性值

Question

我希望属性应该在属性设置为新值时更新。所以我所做的是调用element.requestUpdate()以便我可以获得更新的属性，但requestUpdate是异步的。是否有其他方法可以在不调用requestUpdate的情况下获取更新的属性？ Stackblitz URL => https://stackblitz.com/edit/typescript-nojnqa

LitElement get updated attribute

Answer 1

属性和属性

实际上，当属性更改时，您无需手动更新属性：lit-element具有内置功能，可以反映属性的属性更改。

来自documentation：

您可以配置属性，以便在更改时，其值将反映到其观察到的属性。例如：

// Value of property "myProp" will reflect to attribute "myprop"
myProp: { reflect: true }

在您的示例中，您已经在使用reflect: true，但是您在TS环境中使用JS表示法声明属性。

这个：

static get properties() {
  return {
    name: {
      type: String,
      reflect: true
    }
  }
}

应该这样：

@property({
  reflect: true,
})
name: string;

timing

然后有一点时间问题。你在index.html中输入的代码：

<script>
  (async function() {
    const element = document.querySelector('#app').querySelector('hello-name')
    element.name = 'Maria'
    await element.requestUpdate()

    console.log(element.getAttribute('name')) //// result => Maria
  })()
</script>

在自定义元素附加到dom之后但在LitElement的属性逻辑初始化之前运行。如果您尝试推迟执行此代码，您会发现LitElement的属性 - 属性反射将按预期工作。

等待更新

调用element.requestUpdate()不是必要的，因为setter element.name = ...已经在引擎盖下调用了requestUpdate()。

对于这种情况，LitElement有一个getter，updateComplete，它返回一个在更新周期完成时解析的promise。

element.name = 'Maria';
await element.updateComplete;
console.log(element.getAttribute('name')); // Maria

最后，如果您关注使用async / await，还有许多替代方案：

• 用async取代await / Promise#then()/catch()，
• 使用setImmediate() / setTimeout()等待更新微任务结束，
• 当属性发生变化时触发Event。

Here是StackBlitz的一个分支，有一个可能的解决方案。