Javascript 何时调用lit元素属性“hasChanged”？_Javascript_Properties_Lit Element

Javascript 何时调用lit元素属性“hasChanged”？

javascript properties

Javascript 何时调用lit元素属性“hasChanged”？,javascript,properties,lit-element,Javascript,Properties,Lit Element,我有一个简单的lit元素，它的属性有一个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';

我有一个简单的lit元素，它的属性有一个

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>

使用
```
false
```
可以得到两行：

“

false

”日志输出正是我所期望的。使用lit元素直到0.6.5，您还可以通过返回

true

获得相同的两行

这是lit元素0.7.0中引入的错误还是新行为有效？如果它是有效的，为什么在第一次调用中返回

true

就不会进行第二次调用。

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

<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>

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

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

更多信息：

我已经创建了一个。正如错误报告中指出的那样，无论何时设置属性，都不会调用它。文件在这一点上是错误的。你能把你的答案调整到bug报告中的那个吗？那我就接受了。它不是中描述的bug。

undefined  ->  default
default  ->  explicit