Vue의 컴퓨터 처리에 대한 조사

개시하다

다시 활성화된 의존 관계가 업데이트되었을 때만 계산 속성을 재평가할 수 있습니다.
우리는 이 공식 부분에 대한 평가를 검증했다.
이번에는 3가지 함수로 복선상자의 합계를 집행하여 함수가 몇 차례 처리되었는지 조사했다.

data

data () {
    return {
        // チェックされたチェックボックスの値を配列で保持
        checked_values: [],
        amount: {
            p01: 0
        },
        processing_time: {
            p01: 0,
            p02: 0,
            p03: 0
        }
    }
 }

methods

methods: {
    exec_verification: function() {
        this.process01
        this.process02
        this.processing_time.p03 = this.process03
    }
}

computed

　process01

확인란의 총 값 계산

computed: {
    process01: function() {
        let sum = 0
        this.checked_values.forEach(function(num) {
            sum += Number(num)
        })
        this.amount.computed = sum
        this.processing_time.computed++
    }
}

　process02

process01을 통해 계산된 합계값을 다른 속성에 대입

computed: {
    process02: function() {
        this.amount.a02 = this.amount.a01
        this.processing_time.p02++
    }
}

　process03

process01을 통해 계산된 합계값을 다른 속성에 대입

computed: {
    process03: function() {
        let num = this.processing_time.p03
        num++
        return num
    }
}

확인

계산 버튼을 누르다

프로세스 03만 누르면 처리할 수 있습니다.
프로세스 03 참조 속성processing_time.p03, 그러나 메시지 밖에서 속성을 업데이트하면 캐시와 다른 속성으로 판단되어 매번 처리됩니다.

검사한 곳은 다르지만 합계는 같다

프로세스 01의 실행 횟수가 증가했습니다.
프로세스01에서 속성checked_values을 참조하였으며, 검사하는 곳이 다르기 때문에 캐시와 속성이 다르기 때문에 처리 중입니다.
process02 참조 속성amount.a01이지만 합계값은 변화가 없기 때문에 처리가 진행되지 않았습니다.