如何使用 LitElement 组件正确处理道具更改？

Question

我的场景：我有一个使用 LitElement 创建的 Web 组件，它有一个对象属性。为了初始化它，我正在等待创建元素：

    <script>
      document.addEventListener("DOMContentLoaded", () => {
        const instance = document.querySelector("#myInstance");
        instance.config = {
          data: [
            { firstName: "John", lastName: "Doe", age: 32 },
            { firstName: "Jane", lastName: "Boe", age: 30 },
          ]
        };
      });
    </script>
    <my-component id="myInstance"></my-component>

假设我会不时更改此 data 道具。我想在 data 更改后检查它的值，然后决定下一步我应该做什么。为此，这是我的网络组件的代码：

@customElement("my-component")
export class MyComponent extends LitElement {
  @property({ type: Object }) data: Object;

  protected updated(_changedProperties: Map<PropertyKey, unknown>): void {
    console.log(_changedProperties);
  }

  render() {
      return html`
        <div>blabla</div>
      `;
  }
}

问题是 _changedProperties 地图有 data 但它仍然未定义。我在这里错过了什么？

Answer 1

changedProperties 是所有已更改的属性名称的映射...例如您可以使用它来检查更改的内容 - 如果您想访问实际值，您可以直接使用属性。

看起来像这样

if (_changedProperties.has('myProperty')) {
  // react to a myProperty change
  console.log('The new value of myProperty is', this.myProperty);
}

如何使用 LitElement 组件正确处理道具更改？

How to properly handle a prop change with a LitElement component?

web-component

polymer

lit-element