1

我有一个简单的发光元素，其属性具有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从第一个调用返回来完成第二个调用。

4

1 回答 1

1

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

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

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

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

于 2019-01-15T05:35:06.733 回答