LitElement 中的自定义属性访问器答案

【问题标题】：Custom property accessors in LitElementLitElement 中的自定义属性访问器
【发布时间】：2020-06-26 11:03:15
【问题描述】：

为了学习如何编写自定义属性访问器，我正在尝试创建与默认访问器具有相同行为的属性访问器。我正在使用文档here 中的示例，但我正在努力让它工作。以下导致Uncaught RangeError: Maximum call stack size exceeded 错误。如果我删除 getter 和 setter，元素会按预期工作，并呈现包含“hello”和“world”的两个 div。如何为属性 data 创建自定义属性访问器，其行为与默认属性访问器（未定义 getter 和 setter）相同？

import { LitElement, html } from "lit-element";
import { render } from "lit-html";

class TestElement extends LitElement {
  static get properties() {
    return {
      data: { type: Array },
    };
  }

  set data(val) {
    let oldVal = this.data;
    this.data = val;
    this.requestUpdate("data", oldVal);
  }

  get data() {
    return this.data;
  }

  constructor() {
    super();
    this.data = [];
  }

  render() {
    return html`${this.data.map(d => html` <div>${d}</div>`)}`;
  }
}
customElements.define("test-element", TestElement);

render(html`<test-element .data=${["hello", "world"]}></test-element>`, window.document.body);

我正在尝试重新创建此示例的行为，它按预期呈现“hello”和“world”：

import { LitElement, html } from "lit-element";
import { render } from "lit-html";

class TestElement extends LitElement {
  static get properties() {
    return {
      data: { type: Array },
    };
  }

  constructor() {
    super();
    this.data = [];
  }

  render() {
    return html`${this.data.map(d => html` <div>${d}</div>`)}`;
  }
}
customElements.define("test-element", TestElement);

render(html`<test-element .data=${["hello", "world"]}></test-element>`, window.document.body);

【问题讨论】：

标签： javascript lit-element lit-html

【解决方案1】：

set data(val) {
    let oldVal = this.data;
    this.data = val; // THIS causes an infinity loop as you do invoke the setter again
    this.requestUpdate("data", oldVal);
}

设置一个不同的变量

set data(val) {
    let oldVal = this.data;
    this.__data = val;
    this.requestUpdate("data", oldVal);
}

get data() {
    return this.__data;
}

【讨论】：