javascript - LitElement 中的自定义属性访问器

Question

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

标签： javascriptlit-elementlit-html

Answer 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;
}