vue에서 계산이란 무엇을 의미하나요?-프런트엔드 Q&A-php.cn

vue에서 계산이란 무엇을 의미하나요?

青灯夜游

풀어 주다： 2022-07-25 16:42:58

원래의

3414명이 탐색했습니다.

Vue에서 계산이란 종속성을 기반으로 캐시된 계산인 "계산된 속성"을 의미하며 관련 종속성이 변경될 때만 업데이트됩니다. 계산된 속성이 의존하는 속성이 변경되는 한 계산된 속성은 다시 실행되고 뷰가 업데이트됩니다. 계산된 속성의 결과는 캐시되며 종속 반응 속성이 변경되지 않는 한 다시 계산되지 않습니다.

vue에서 계산이란 무엇을 의미하나요?

이 튜토리얼의 운영 환경: windows7 시스템, vue3 버전, DELL G3 컴퓨터.

computed 정의

Computed는 vue의 계산된 속성입니다. 종속성에 기반한 캐시된 계산입니다. 관련 종속성이 변경될 때만 업데이트됩니다.

computed Usage

일반적으로 계산된 속성은 기본적으로 사용됩니다.

vue에서 계산이란 무엇을 의미하나요?

computed의 반응형 종속성(캐싱)

1. 계산된 각 계산 속성이 변경에 따라 달라지는 한 계산 속성이 다시 실행되고 뷰가 갱신됩니다. . 아래 코드에서 계산된 속성 fullName은 두 속성 firstName 및 lastName에 따라 달라집니다. 해당 속성 중 하나가 변경되면 fullName이 다시 실행됩니다.
2. 계산된 속성이 캐시됩니다. 다음 코드에서는 fullName이 두 번 사용되지만 "this is fullName"은 콘솔에 한 번만 출력됩니다.

<template>
  <div>
    <div>
      姓：<input>
    </div>
    <div>
      名：<input>
    </div>
    <!-- 调用两次fullName -->
    <div>姓名：{{ fullName }}</div>
    <div>姓名：{{ fullName }}</div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      firstName: "张",
      lastName: "三",
    };
  },
  computed: {
    fullName() {
        console.log("这是fullName");
        return this.firstName + this.lastName;
    }
  }
};
</script>

로그인 후 복사

Computed의 작동 방식

Computed의 작동 방식을 이해하려면 다음 세 가지 질문만 이해하면 됩니다.

1. Computed도 반응형입니다

2. Computed가 캐싱을 제어하는 방식

3. How to update Computed

원리(현지어로):

Responsiveness of Computed

응답성이 무엇인지, 구독자 감시자가 무엇인지 잘 모르시나요? 먼저 Vue 응답성의 원리를 이해할 수 있습니다.

간단히 말하면:

computed에 대해 설정한 get 및 set 함수는 Object.defineProperty와 연결됩니다.
그래서 Vue는 계산된 작업을 모니터링, 캡처, 읽고 할당할 수 있습니다.
computed를 읽으면 set get 함수가 실행되지만, 캐시 연산의 레이어도 있기 때문에 그렇게 간단하지는 않습니다. 데이터가 오염되지 않고 더티 데이터가 아닌 경우 get 함수를 실행하지 않고 캐시에서 직접 값을 가져옵니다. (더티 데이터가 무엇인지는 나중에 다루겠습니다.)
computed를 할당하면 set set 기능이 실행됩니다. 이는 비교적 간단하며 설정된 값을 Object.defineProperty - set에 직접 할당합니다.

Computed의 캐시를 제어하는 방법

Computed에 캐시가 있다는 것은 모두가 알고 있으며 관계자가 이에 대해 설명했습니다.

계산된 속성의 결과는 캐시되며 종속 반응 속성이 변경되지 않는 한 다시 계산되지 않습니다. 종속성(예: 비반응형 속성)이 인스턴스 범위를 벗어나면 계산된 속성이 업데이트되지 않습니다.

왜 캐싱이 필요한가요? 거대한 배열을 탐색하고 많은 계산을 수행해야 하는 값비싼 계산 속성 A가 있다고 가정해 보겠습니다. 그러면 A에 의존하는 다른 계산된 속성이 있을 수 있습니다. 캐싱이 없으면 필연적으로 A의 get 함수를 여러 번 실행하게 됩니다. 많은 양의 계산으로 인해 JS 스레드가 점유되어 페이지 렌더링이 차단됩니다.

그렇다면 Vue에서 계산은 캐시 사용 여부를 어떻게 결정합니까?

먼저 계산이 끝나면 계산된 값이 변수(watcher.value)에 저장됩니다. 계산된 내용을 읽고 캐시를 사용할 때 이 변수가 직접 반환됩니다. 계산이 업데이트되면 이 변수가 다시 할당되고 업데이트됩니다.

TIP: 계산 계산은 설정한 get 함수를 호출한 다음 반환 값을 가져오는 것입니다.

계산된 제어 캐시의 중요한 점은 [더티 데이터 플래그 더티] 더티는 감시자의 속성입니다.

dirty가 true인 경우 계산된 내용을 읽으면 get 기능이 실행되어 다시 계산됩니다.
dirty가 false인 경우 계산된 읽기는 캐시를 사용합니다.

캐싱 메커니즘에 대한 간략한 설명

각 계산이 자체 감시자를 생성할 때 watcher.dirty = true로 설정되므로 계산이 사용될 때 값이 계산됩니다
종속 데이터가 변경되어 계산되었음을 알리면 watcher.dirty = true가 지정됩니다. 계산을 다시 읽으면 get 함수가 실행되어 다시 계산됩니다.
계산이 완료된 후 watcher.dirty = false가 설정되어 다른 곳에서 다시 읽을 때 계산을 피하기 위해 캐시를 사용하게 됩니다.

종속 데이터가 변경될 때 계산을 업데이트하는 방법은 무엇입니까?

Vue 응답성 원칙을 간략하게 설명합니다.

계산의 본질은 데이터와 유사합니다. 사용되면 구독자 감시자가 생성되어 종속성 컬렉션으로 전달됩니다. 예를 들어 A가 B를 참조하면 B는 A의 감시자를 수집합니다.

Scene 설정

이제 페이지 A는 계산된 B를 참조하고 계산된 B는 데이터 C에 따라 달라집니다.

이렇게 종속성 순서는 A->B->C입니다.

그렇다면 데이터 C가 변경되면 어떻게 될까요?

이런가요?