更改对象时触发组件重新渲染属性

Question

是否可以在观察对象的属性发生变化时以某种方式触发组件重新渲染？我知道如果我替换对象，组件将重新呈现，但是当我只更改它的属性

时它不会

class SomeComponent extends LitElement {

      static get properties() {
        return {
          obj: { type: Object, reflect: true }
        }
      }

      constructor() {
        super();
        this.obj = {
           value: 'value' 
        };

      }

      handleClick(value) {
        this.obj.value = value;
      }

      render() {
        return html `
          <div>
            <p>My Value: ${this.obj.value}</p>

            <button @click="${() => this.handleClick('new value')}">Button</button>
          </div>
        `;
      }

    }

 customElements.define('some-component', SomeComponent);

尝试使用 this.requestUpdate() 并且有效，但我不确定这样的解决方案是否已优化

Answer 1

我想说在您更改 obj.value 之后立即放置 requestUpdate 方法是个好主意。

我经常使用 this.requestUpdate() 工作，它通常会触发我想要的改变。

您还可以查看 this.updated 方法并像这样实现它：

updated(changedProperties: PropertyValues): void {
    if (changedProperties.has('obj') triggerMethod()
  }

但这应该适合你：

 handleClick(value) {
    this.obj.value = value;
    this.requestUpdate()
  }

请注意，使用该方法绝对针对网络标准进行了优化:)

更改对象时触发组件重新渲染属性

Trigger component re-render when changing object property

javascript

web-component

lit-element

lit-html

更改对象时触发组件重新渲染 属性

Trigger component re-render when changing object property

javascript

web-component

lit-element

lit-html

更改对象时触发组件重新渲染属性