何时调用 lit-element 属性“hasChanged”？

Question

我有一个带有属性的简单 lit-element，它具有 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”日志输出符合我的预期。使用 lit-element 直到 0.6.5，您也可以通过返回 true.

获得相同的两行

这是 lit-element 0.7.0 中引入的错误还是新行为有效？如果它是有效的，为什么没有通过从第一次调用返回 true 来完成第二次调用。

Answer 1

这是一种性能优化，始终将值设置为属性而不调用此函数。

第一次更新组件后，每当设置属性时调用此函数。可以比较属性的新旧值，判断属性是否发生了变化。

此函数决定是否会发生更新（returns true）或不发生更新（returns false）

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

何时调用 lit-element 属性“hasChanged”？

When is lit-element properties `hasChanged` called?

javascript

properties

lit-element