Question

我有一个简单的照明元素，它的属性带有hasChanged函数。

<html>
<head>
<meta charset="utf-8" /> 
</head>
<body>

<script type="module">
  import {LitElement, html} from 'https://unpkg.com/@polymer/lit-element@0.7.0/lit-element.js?module';

  class MyElement extends LitElement {

    static get properties() {
      return {
        mood: {
          type: String,
          hasChanged: function(value, oldValue) {
            console.log(oldValue, " -> ", value);
            return BOOLEAN; // <== replace with true or false
          }
        }
      };
    }

    constructor() {
      super();
      this.mood = 'default';
    }

    render() {
      return html`${this.mood}`;
    }

  }

  customElements.define('my-element', MyElement);
</script>

<my-element mood="explicit"></my-element>

</body>
</html>

对于显示的结果，将BOOLEAN替换为true或false并不重要。两者都显示explicit。

但是日志输出不同：

使用true只会得到一行：

undefined  ->  default

使用false可获得两行：

undefined  ->  default
default  ->  explicit

'false'日志输出是我所期望的。直到0.6.5为止，使用lit-element，您还可以通过返回true来获得相同的两行。

这是在照明元素0.7.0中引入的Bug还是新行为有效？而且如果有效，为什么不通过从第一次调用返回true来进行第二次调用。

Answer 1

这是一项性能优化，始终将设置为属性的值设置为属性，而无需调用此函数。

第一次更新组件后，只要设置了属性，就会调用此函数。您可以比较属性的旧值和新值，并评估属性是否已更改。

此功能决定是否进行更新（返回true）（否）（返回false）

更多信息：https://lit-element.polymer-project.org/guide/properties#configure-property-changes

什么时候调用点元素属性“ hasChanged”？

1 个答案: