Vue는 결과가 변경될 때만 계산된 속성을 업데이트합니다.

Question

제가 겪은 문제를 다음과 같이 단순화해 보세요.

기본값 내보내기 {
    데이터 () {
        반품 {
            i_change_alot: 0,
        };
    },
    탑재() {
        setInterval(() => {
            this.i_change_alot = Math.random();
        }, 10);
    },
    계산됨: {
        일부계산값() {
            this.i_change_alot;
            
            'a'를 반환합니다.
        }
    }
}

10밀리초마다 임의의 값으로 변경되는 i_change_alot 속성을 만들었습니다. 이는 속성이 극도로 반응적이 되어 계산된 속성을 트리거한다는 것을 의미합니다.

예를 들어 단순히 this.i_change_alot를 호출하여 종속성을 트리거하지만 계산된 속성의 result

최종 결과는 계산된 속성인 someCompulatedValue가 10밀리초마다 업데이트되어 제가 아는 한 뷰가 다시 렌더링되도록 하는 것입니다.

값/결과가 변경될 때만 someCompulatedValue를 다시 렌더링하도록 하려면 어떻게 해야 하나요?

(원래 질문은 "1초 전", "2초 전" 등과 같은 대응적 상대 날짜를 표시하는 것에 관한 것이었습니다. 그러나 얼마 후 이 날짜는 30분 전이 됩니다. < code>31분 전 이는 문자열 표현이 변경되지 않았지만 날짜 속성에 대한 종속성으로 인해 여전히 10밀리초마다 다시 렌더링됨을 의미합니다.

https://github.com/vuejs/vue/issues/11399에 따르면 관찰자를 사용하여 구조체를 생성할 수 있지만 직관적이지 않습니다.

Answer 1

값이 변경되지 않을 때 Vue가 계산을 트리거하는 이유는 무엇입니까?

Vue는 다시 계산할 때까지 최종 결과가 변경되었는지 알 수 없기 때문입니다. 따라서 계산된 변수는 종속성이 변경될 때마다 다시 계산되며 이는 불가피합니다.

일반적인 오해는 Vue가 값을 계산하여 계산 변수를 캐시하지만 실제로 Vue는 종속성 상태에 따라 계산 변수를 캐시한다는 것입니다.

너무 자주 다시 렌더링하지 마세요

알다시피 관찰자를 만들거나 계산된 값을 사용하여 템플릿을 구성 요소로 래핑할 수 있습니다.

여기서 다른 구성요소 도움말로 포장하는 이유는 무엇인가요?

Vue가 템플릿을 렌더링 기능으로 변환하기 때문입니다. 함수는 종속성이 변경될 때마다 다시 계산됩니다. 익숙한 것 같나요? 예, 계산된 변수처럼 작동합니다. 렌더링 함수의 종속성은 템플릿에서 사용하는 모든 변수입니다. 따라서 자주 변경되는 변수를 구성 요소로 래핑하면 Vue는 해당 구성 요소만 다시 렌더링하고 대규모 구성 요소는 다시 렌더링하지 않습니다. 이는 성과에 큰 영향을 미칠 것입니다