LitElement 및 TypeScript를 사용하여 속성 변경 내용 관찰 방법

지난 게시물에서 나는 TypeScript를 통해 @property와 @internalProperty 장식기의 사용법을 설명했다.또한 LitElement이 선언의 등록 정보를 관리하는 방법과 해당 선언의 업데이트 주기를 트리거하여 어셈블리가 정의된 템플릿을 다시 렌더링하는 방법에 대해서도 설명했습니다.
며칠 전에 한 개발상 사이트에서 이런 부동산 변화에 관한 재미있는 문제를 보았다.

How to observe @property changes in a LitElement component?

본문에서 나는 어떻게 관찰하는가(그리고'반응'이 가능하다?)를 설명할 것이다.이러한 속성은 LitElement 어셈블리의 라이프 사이클을 고려합니다.

LitElement 속성 관리 방법 실용적인 용례

사용자 목록을 표시할 작은 프로그램을 만들고 있다고 가정하십시오.둘 중 하나를 선택할 수 있으며 추가 세부 정보를 표시해야 합니다.이 경우 주소 정보가 표시됩니다.

첫걸음

우리는 처음부터 완전한 프로젝트를 만드는 것이 아니라 를 기점으로 할 것이다.링크를 열고 다음 단계를 계속하기 위해 포크를 만듭니다.

@속성 vs@internalProperty 프레젠테이션 프로젝트 내용

fork를 완료하면 다음 항목이 준비됩니다.

데이터 모델, 유형 스크립트 인터페이스와 정적 형식을 사용합니다.

- 사용자와 주소를 테스트하기 위해 두 개의 상수를 내보내는 데이터 세트

LitElement의 두 웹 구성 요소 사용

구성 요소MainViewer, 이것은 용기 구성 요소로 사용자 목록과 상세한 정보를 표시합니다.

구성 요소AddressViewer는 하위 구성 요소로 메인 목록에서 선택한 userId를 수신합니다.

재산 변동

잠시 후 고려할 주요 속성을 알아보기 위해 기존 구성 요소를 더 자세히 살펴보자.main-viewer.ts 파일은 다음 템플릿을 정의합니다.

<div>
  <h1>User Address Viewer</h1>
  <!-- The User list is rendered here -->
  <!-- Child component rendered below -->
  <address-viewer .userId=${this.userId}></address-viewer>
</div>

코드 세션은 userId 속성의 상관성을 보여 줍니다. 이 속성은 MainViewer 구성 요소의 일부분입니다.변경할 때마다 렌더링 함수를 트리거하여 새 속성 값을 서브어셈블리로 보냅니다(<address-viewer userId=${newValue}>.
한편, address-viewer.ts 파일은 공공 속성userId을 정의하고 내부 속성이 필요한지 확인Address 대상:

// address-viewer.ts

@customElement("address-viewer")
class AddressViewer extends LitElement {
  @property({ type: Number }) userId: number;
  @internalProperty() userAddress?: Address;
}

userId 구성 요소의 AddressViewer 속성에 주목하여 이러한 변화를 어떻게 관찰하는지 알아보겠습니다.

성능 변화 관찰

새 값이 성명된 속성으로 설정되면 업데이트 주기를 촉발하여 다시 프로세스를 나타냅니다.이 모든 것이 발생할 때, 서로 다른 방법을 사용합니다. 우리는 그 중의 몇 가지 방법을 사용하여 어떤 속성을 변경했는지 알 수 있습니다.

속성의 setter 방법

이것은 우리가 변화를 관찰하는 첫 번째 곳이다.@property() 파일의 address-viewer.ts 선언을 업데이트합니다.

// address-viewer.ts

@customElement("address-viewer")
class AddressViewer extends LitElement {

  @property({ type: Number }) set userId(userId: number) {
    const oldValue = this._userId;
    this._userId = userId;
    this.requestUpdate("userId", oldValue);
  }

  private _userId: number;

  constructor() {
    super();
  }

  get userId() {
    return this._userId;
  }
}

보시다시피 새로운 set 속성을 처리하기 위해 get 방법과 _userId 방법을 추가했습니다.액세서리 방법을 사용할 때, 새로운 개인 속성을 만드는 것은 흔히 볼 수 있는 방법이다._userId의 밑줄 접두사도 코드 약정이다.
단, setter 방법을 작성하기 때문에, 구성 요소의 업데이트를 계획하기 위해 수동으로 requestUpdate 방법을 호출해야 할 수도 있습니다.다시 말하면 LitElement은 성명된 속성을 위한 setter 방법을 생성하고 자동으로 호출한다. requestUpdate

requestUpdate 메서드

구성 요소 상태나 속성을 기반으로 업데이트 요소를 변경할 때 이 방법을 사용합니다.update()와 render() 함수를 호출하기 전에 새로운 값을 포획하기에 좋은 곳입니다.

// address-viewer.ts

requestUpdate(name?: PropertyKey, oldValue?: unknown) {
  const newValue = this[name];
  // You can process the "newValue" and "oldValue" here
  // ....
  // Proceed to schedule an update
  return super.requestUpdate(name, oldValue);
}

이 예에서, 이 방법은 이전 값 oldValue 과 함께 변경된 속성의 이름을 수신합니다.마지막으로 꼭 전화하세요super.requestUpdate(name, oldValue).

업데이트 방법

이것은 속성 변경을 관찰하는 또 다른 옵션입니다.다음 예제를 참조하십시오.

update(changedProperties: Map<string, unknown>) {
  if (changedProperties.has("userId")) {
    const oldValue = changedProperties.get("userId") as number;
    const newValue = this.userId;
    this.loadAddress(newValue);
  }
  super.update(changedProperties);
}

이전 옵션과 비교하면 update 방법의 특징은 약간 다르다.
changedProperties 매개 변수는 Map 구조로 키가 성명된 속성의 이름이며 값은 옛 값에 대응한다(새 값이 설정되어 있으며 this.<propertyName>를 통해 얻을 수 있다).
재산이 변경되었는지 확인하려면 changedProperties.has("<propName>")를 사용하십시오.속성이 변경된 경우 changedProperties.get("<propName>")를 사용하여 이전 값에 액세스합니다.성명의 속성 정의와 일치하는 정적 형식이 필요합니다.
다시 작성하여 DOM을 렌더링하고 업데이트할 수 있습니다.이 경우 렌더링 프로세스를 계속하려면 마지막 호출super.update(changedProperties)을 수행해야 합니다.
이 방법에 속성을 설정하면 다른 업데이트를 터치하지 않습니다.

업데이트 방법

이 방법의 서명은 update 와 일치할 것입니다.그러나 요소의 DOM이 업데이트되고 렌더링될 때 이 메서드가 호출됩니다.구성 요소의 생명주기 끝에 있기 때문에 다른 방법을 사용할 필요가 없습니다.

updated(changedProperties: Map<string, unknown>) {
  console.log(`updated(). changedProps: `, changedProperties);
  if (changedProperties.has("userId")) {
    // get the old value here
    const oldValue = changedProperties.get("userId") as number;
    // new value is 
    const newValue = this.userId;
  }

  // No need to call any other method here.
}

이 방법을 사용할 수 있습니다.

업데이트 후 속성 변경 확인

업데이트 후 작업 또는 업데이트 후 처리를 수행합니다.

이 메서드에서 속성을 설정하면 업데이트 프로세스가 다시 트리거됩니다.

유형 선언 현장 프레젠테이션

이 코드 한번 해볼래요?Stackblitz 편집기만 열면 됩니다.
문제가 있으면 언제든지 연락 주세요.계속해서 저 를 주목해 주시고 제 일에 대한 더 많은 정보를 얻으세요.
현대 인터넷 컨설팅 회사로 기업의 디지털화 전환을 돕는 데 주력하고 있다.React, Angular, Vue, 웹 구성 요소,GraphQL,Node,Bazel 또는 Polymer에 대한 전문가 구조 지도, 교육 또는 문의는 방문 하십시오.
이런 인터넷 매체는 모든 사람을 위해 포용성과 교육적인 네트워크를 만드는 데 전념한다.이벤트, 팟캐스트, 무료 콘텐츠를 통해 현대 인터넷의 최신 진전을 알 수 있습니다.자세한 내용은 GitHub를 참조하십시오.