polymer - 如何使用 LitElement 观察属性变化

Question

我不知道如何观察 LitElement 中的属性变化。

我一直在尝试这些方法，但我无法让这些工作:

  static get properties() {
    return {
      temp1:String,
      temp2: {
       type:String,
       observer: '_temp2Changed'
        }
  };

  temp1Changed(newValue, oldValue){
    console.log("temp1 changed")
  }
  _temp2Changed(newValue, oldValue){
    console.log("temp2 changed")
  }

Answer 1

版本 0.6.0+

首先，您必须指定元素属性。
您可以通过创建一个静态 getter 来实现，该 getter 返回一个对象，包括它们的名称作为键和它们的属性相关配置。
updated当更改的属性导致重新渲染时，将调用生命周期方法。第一个参数将在更新之前返回值。

class MyComponent extends LitElement {
  static get properties() {
    return {
      foo: {}
    };
  }

  constructor() {
    super();
    this.foo = 0;
    setInterval(() => this.foo++, 1000);
  }

  updated(changedProperties) {
    console.log(changedProperties); // logs previous values
    console.log(this.foo); // logs current value
  }

  render() {
    return html`${this.foo}`;
  }
}

customElements.define("my-component", MyComponent);