如何将一个属性映射到 litElement 中的两个属性？

Question

我在一个 litElement 项目中工作，在一个组件中，我有一个属性需要映射到一个属性，并用一个函数计算到另一个，像这样：


const calculateTwo(val) {
 return `${val} ${val}`
}

class MyElement extends LitElement {
  
  static get properties() {
    return {
      one: {
        type: String,
        attribute: 'foo',
      },
      two: {
        type: String,
        attribute: 'foo',
        reflect: false,
        converter: value => calculateTwo(value),
      },
    };
  }
}

<my-component foo="bar"></my-component>

如果我这样做，one 不会设置为 'bar'，但 two 是正确的

如果我删除属性 two，one 可以正常工作。

实现此目标的更好方法是什么？

我可以使用 update 函数，但我想知道是否有更好的方法。

我不想对其中一个属性使用 getter 函数，因为转换器的功能非常繁重，我不希望每次我想访问时都调用它道具

Answer 1

如果您不想申请 getter，那么 updated 是您最好的选择

const calculateTwo(val) {
 return `${val} ${val}`
}

class MyElement extends LitElement {
  static get properties() {
    return {
      one: {
        type: String,
        attribute: 'foo',
      },
      two: {
        attribute: false
      }
    };
  }

  updated(changed) {
    if (changed.has('one')
      this.oneChanged()
  }

  oneChanged() {
    this.two = calculateTwo(this.one);
  }
}

Answer 2

我认为使用属性访问器可以避免调用渲染两次。

const calculateTwo(val) {
 return `${val} ${val}`
}

class MyElement extends LitElement {
  static get properties() {
    return {
      one: {
        type: String,
        attribute: 'foo',
      },
      two: {
        attribute: false
      }
    };
  }

  set one(value) {
    const oldValue = this._one;

    this.two = value;
    this._one = value;

    this.requestUpdate('one', oldValue);
  }

  get one() {
    return this._one;
  }

  set two(value) {
    const oldValue = this._two;

    this._two = calculateTwo(value);

    this.requestUpdate('two', oldValue);
  }

  get two() {
    return this._two;
  }
}

如何将一个属性映射到 litElement 中的两个属性？

How to map one attribute to two properties in litElement?

javascript

web-component

lit-element

lit-html