Lit生命周期钩子shouldUpdate与其他钩子配合失效问题排查

在Lit组件中尝试使用shouldUpdate生命周期钩子与其他生命周期钩子配合，但无法正常生效。对照Lit官方shouldUpdate文档中的示例，仍无法找出代码问题，恳请帮忙修正。

Lit组件代码 #

import { LitElement, css, html } from 'lit';
import { classMap } from 'lit/directives/class-map.js';
import { styleMap } from 'lit/directives/style-map.js';

export class MyElement extends LitElement {
  static properties = {
    classes: {},
    styles: {},
    count: { type: Number },
  };
  static styles = css`
    .someclass { border: 1px solid red; padding: 4px; }
    .anotherclass { background-color: navy; }
  `;

  constructor() {
    super();
    this.classes = { someclass: true, anotherclass: true };
    this.styles = { color: 'lightgreen', fontFamily: 'Roboto' };
    this.count = 0;
    console.log('constructor');
  }

  firstUpdated() {
    console.log('first updated');
  }

  toggleCSS() {
    this.classes = {
      ...this.classes,
      anotherclass: !this.classes.anotherclass,
    };
    this.count++;
  }

  changeStyle() {
    this.styles = { ...this.styles, color: 'red' };
  }

  shouldUpdate(changedProperties) {
    changedProperties.forEach((oldValue, propName) => {
      console.log(
        `${propName} changed. oldValue: ${oldValue}, new value ${this[propName]}`
      );
    });
    return true;
  }

  requestUpdate() {
    super.requestUpdate();
    console.log('request update', this.classes);
  }

  willUpdate() {
    console.log('will update');
  }

  performUpdate() {
    super.performUpdate();
    console.log('perform update');
  }

  updated() {
    console.log('updated', this.classes);
  }

  updateComplete() {
    console.log('update complete');
  }

  render() {
    return html`
      <div>
      <div class=${classMap(this.classes)} style=${styleMap(this.styles)}>
      Some content
      </div>
      <button @click=${this.toggleCSS}>Change css </button>
      <button @click=${this.changeStyle}>Change Style </button>
      </div>
    `;
  }
}

window.customElements.define('my-element', MyElement);

官方shouldUpdate示例 #

shouldUpdate(changedProperties: Map<string, any>) {
  // Only update element if prop1 changed.
  return changedProperties.has('prop1'); 
}

内容的提问来源于stack exchange，提问作者Coder