Повторный рендеринг компонента триггера при изменении свойства объекта - PullRequest
Новая
       61

Повторный рендеринг компонента триггера при изменении свойства объекта

3 голосов
/ 12 февраля 2020

Можно ли каким-либо образом вызвать повторную визуализацию компонента, когда свойство наблюдаемого объекта изменяется? Я знаю, что компонент будет повторно визуализироваться, если я заменю объект, но это не так, когда я просто изменяю его свойство 

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(), и он работает, но я не уверен, если такой решение оптимизировано

1 Ответ

2 голосов
/ 13 февраля 2020

Я бы сказал, что размещение метода requestUpdate сразу после изменения obj.value - хорошая идея.

Я много работаю с this.requestUpdate (), и это обычно вызывает изменение, которое я хотел.

Вы также можете посмотреть на метод this.updated и реализовать его следующим образом: 

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

Но это должно сделать это для вас: 

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

для вашего беспокойство, использование этого метода АБСОЛЮТНО оптимизировано для веб-стандартов:)

...