Vue.js 캐시 메서드 결과

Vue.js 캐시 메서드 결과

현재 다음과 같이 같은 루프 내에서 같은 함수를 2회 호출하는 루프가 있습니다.

<div class="checkbox" v-for="(value, key) in range">
    <input type="checkbox" :disabled="count(Number(key)) === 0">

    <span class="items">{{ count(Number(key)) }}</span>
</div>

왜냐하면count메서드가 두 번 호출되고 있기 때문에 디버깅이 어려워집니다.count와 같은 것으로 기능하기 때문에console.log모든 값이 두 번 표시됩니다.

첫 번째 카운트 방식에서는 단순히 0인지 확인하고 다른 하나는 카운트를 나타냅니다.그 결과를 재사용할 수 있는 간단한 방법이 있을까요?count두 번 부를 필요가 없습니다.이미 결과가 나왔을 때는 다시 전화할 필요가 없습니다.

현재 반복 키를 전달해야 하므로 계산된 속성 같은 것이 작동하지 않습니다.

안타깝게도 메서드는 항상 재렌더되기 때문에 사용 가능한 캐시는 없습니다.

이에 비해 메서드 호출은 재렌더가 발생할 때마다 항상 함수를 실행합니다.

캐싱이 필요한 이유대규모 어레이를 루프하여 많은 계산을 수행해야 하는 고가의 계산 속성 A가 있다고 가정해 보십시오.그러면 A에 의존하는 다른 계산 속성이 있을 수 있습니다.캐시가 없으면 A의 getter를 필요 이상으로 실행할 수 있습니다!캐시를 원하지 않는 경우 대신 방법을 사용하십시오.

출처 : https://vuejs.org/v2/guide/computed.html

참고로 대부분의 경우 계산된 속성을 사용할 수 있다고 생각합니다.

computed: {
    rangeWithCount() {
        // assuming that range is an array, otherwise use Object.entries()
        return this.range.map((value, key) => {
            // assuming value is already an object, otherwise create a new one
            return Object.assign({}, value, {
                count: foo(key)
            });
        })
    }
}

계산 도구에 대해 다시 한 번 설명하겠습니다.

<div class="checkbox" v-for="value in rangeWithCount">
    <input type="checkbox" :disabled="value.count === 0">

    <span class="items">{{ value.count }}</span>
</div>

언급URL : https://stackoverflow.com/questions/44515728/vue-js-cache-method-outcome