Vueのcomputedの処理について調査

はじめに

算出プロパティは、リアクティブな依存関係が更新されたときにだけ再評価されます。

公式のこの部分についてどのように評価されるのか検証してみました。

今回はチェックボックスの合計値を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
    }
}

##検証

計算ボタンを押下

process03は押下しただけ処理が行われます。
process03ではプロパティprocessing_time.p03を参照しているのですが、メッソドの外でプロパティを更新している為、キャッシュされているプロパティと異なると判断され毎回処理が走ります。

チェック箇所は異なるが合計値は同じ

process01の実行回数は増えています。
process01ではプロパティchecked_valuesを参照していますが、チェックしている箇所が異なっているためキャッシュしているプロパティと異なるということで処理が走っています。
process02はプロパティamount.a01を参照していますが合計値は変わっていないので処理が走っていないということになります。