【Vue.js】computedを呼び出す際にインクリメント・デクリメント演算子を指定したとき

本で学習した際のサンプルコードに、methods内でcomputedプロパティにインクリメント演算子とデクリメント演算子を追加して呼び出していました。
その際の挙動が全然わからず、やっと理解できたので残しておきます。

（専門用語などに疎いので、間違いありましたらご指摘お願いします）

getterとsetterについておさらい

まずgetter、setterとは、dataの変数を間接的に取得、変更するものです。
算出プロパティに直接関数を指定した場合、その関数は自動的にgetterとして扱われます。
しかし、以下のようオブジェクト内にget、set関数を指定することでsetterの役割も追加できます。

computed: {
  プロパティ名　：　{
    get() { 処理・・・・・・return 結果}　,
    set(引数) { 処理 }
  },
　　・・・・・・
}

この際get関数にはreturnを、set関数には引数を指定する必要があります。

computedプロパティにインクリメント・デクリメント演算子をつけて呼び出す

サンプルコード

test.vue

<template>
  <div>
    <button
      v-on:click.right.prevent="increClicked"
      v-on:click.left.prevent="decreClicked"
    >
      クリック
    </button>
    <div>{{ number1 }}</div>
  </div>
</template>

<script lang="ts">
import Vue from "vue";
export default Vue.extend({
  data() {
    return {
      number1: 0,
    };
  },
  computed: {
    increAndDecre: {
      get() {
        console.log("getがよばれた");
        console.log("get:" + this.number1);
        return (this as any).number1;
      },
      set(i: number) {
        console.log("setがよばれた");
        console.log("set i = " + i);
        this.number1 += i;
        console.log("set後number1:" + this.number1);
      },
    },
  },
  methods: {
    increClicked() {
      console.log("increClickedがよばれた");
      this.increAndDecre++;
    },
    decreClicked() {
      console.log("decreClickedがよばれた");
      this.increAndDecre--;
    },
  },
});
</script>

methodsの処理

test.vue

 methods: {
    increClicked() {
      console.log("increClickedがよばれた");
      this.increAndDecre++;
    },
    decreClicked() {
      console.log("decreClickedがよばれた");
      this.increAndDecre--;
    },
  },

ボタンを右クリックするとincreClicked、左クリックするとdecreClickedのメソッドが呼ばれます。
それぞれのメソッド内でcomputedのincreAndDecreを指定しており、プロパティに+1または-1をしています。

computedの処理

test.vue

computed: {
    increAndDecre: {
      get() {
        console.log("getがよばれた");
        console.log("get:" + this.number1);
        return (this as any).number1;
      },
      set(i: number) {
        console.log("setがよばれた");
        console.log("set i = " + i);
        this.number1 += i;
        console.log("set後number1:" + this.number1);
      },
    },
  },

getterでは単純にdataのnumber1変数を返しています。
setterでは引数iをnumber1に足す処理を行なっています。

ここで私は、setterの引数には変更された値が入る＝methodsで指定された+1か-1が入るもんだと思っていて、number1変数は1ずつ増える、または減るもんだと思っていました・・・（全然違う）

実際に動かしてみる

思ってたんと全然違う動きしてる！！
consoleを一つずつ読み解いていくと、どうやら以下のような動きをしているようです。

例）インクリメント

1クリック目

1-1. methodsのincreClicked()が呼ばれる

1-2. computedのincreAndDecreが呼ばれる

1-3. get（）が呼ばれ、現在のnumber1の値（初期値0）がreturnされる

1-4. returnされた値に対してインクリメントされる（0+1=1）

1-5. set（）が呼ばれ、引数iに手順1-4で計算された値（1）が入る

1-6. 変数number1に引数iが足される(0+1=1)

2クリック目

2-1. methodsのincreClicked()が呼ばれる

2-2. computedのincreAndDecreが呼ばれる

2-3. get（）が呼ばれ、現在のnumber1の値（1回目の処理の結果=1）がreturnされる

2-4. returnされた値に対してインクリメントされる（1+1=2）

2-5. set（）が呼ばれ、引数iに手順2-4で計算された値（2）が入る

2-6. 変数number1に引数iが足される(1+2=3)

まとめ

① computedにインクリメント・デクリメントの処理をすると、returnされた値に対して行われる
② setの引数iには変更後（getのreturn後の変更）の値が入る