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

Question

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

LitElement get updated attribute

Answer 1

属性和特性

实际上您不需要在属性更改时手动更新属性：lit-element 具有反映属性更改的内置功能属性。

来自documentation：

You can configure a property so that whenever it changes, its value is reflected to its observed attribute. For example:

// 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;

时机

然后还有一点时间问题。您输入的代码 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>

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

等待更新

不需要调用 element.requestUpdate()，因为 setter element.name = ... 已经在后台调用了 requestUpdate()。

对于这种情况，LitElement 有一个 getter、updateComplete returns 一个在更新周期完成时解析的承诺。

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

最后，如果您担心 async/await 的使用，则有多种选择：

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

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