【Vue.js3】getメソッドの戻り値がsetメソッドの引数にセットされる理由

Question

質問内容

Vue.js3の勉強をしていて、サンプルコードでわからないことがあったので質問させてください。

算術プロパティでgetter, setterを使用し、
コンポーネントで使用するというサンプルなのですが、

下記ソースコードにて、
get()メソッドの の戻り値が、set()メソッドの引数に入る理由がわかりません。

var item = get() { return this.vel * 2}
set(item) { ~~ }

このように書くのなら理解できるのですが、
サンプルでは、自分でvalueという変数の用意をしていません。

valueにget()の戻り値がセットされるのは、どのタイミングなのでしょうか？
処理の流れと理由が知りたいです。

また、aの値を更新した場合、bの値も更新されることは理解できるのですが、
bの値を更新した場合、aの値が更新できる理由がわかりません。

処理が戻っているのでしょうか？
それとも、this.valが更新されたため、処理全体を再実行しているのでしょうか？

粗末な文章となってしまい大変申し訳ないのですが、これ以上の表現が思い浮かびませんでした。。
ご教授いただけますと幸いです、よろしくお願いいたします。

該当のソースコード

<script>
export default {
  name: 'HelloWorld',
  props: {
    title: String, 
  },
  data() {
    return {
      message: '算術プロパティの利用。',
      val: 0,
    }
  },
  computed: {
    a: {
      get() {
        return this.val * 2
      },
      set(value) {
        this.val = Math.floor(value / 2)
      },
    },
    b: {
      get() {
        return this.val * this.val
      },
      set(value) {
        this.val = Math.floor(Math.sqrt(value))
      },
    },
  },
  created() {
    this.val = 10
  },
}
</script>

Answer 1

valueにget()の戻り値がセットされるのは、どのタイミングなのでしょうか？

されません。get()の返り値は、呼んだ側に渡されるだけです。

bの値を更新した場合、aの値が更新できる理由がわかりません。

bのset()でthis.valが書き換わるので、同じthis.valを参照するaをget()した値も当然変化します。

Comments

[maisumakun]

> aの値を更新した場合、bの値も更新されることは理解できるのですが、
bの値を更新した場合、aの値が更新できる理由がわかりません。

なぜ前半が理解できるのに後半が理解できないのか、どのような解釈をしているのかが把握できません。

[maisumakun]

> get()メソッドの の戻り値が、set()メソッドの引数に入る理由がわかりません。

流れは逆です。set()がthis.valを書き換えて、その値をget()が参照しています。

[oden141]

@maisumakunさん

ご回答いただきありがとうございます。

> なぜ前半が理解できるのに後半が理解できないのか、どのような解釈をしているのかが把握できません。

上から処理を実行していくと、
get() を実行した後に、set() が実行される、
だから、set()は引数(value)にget()の戻り値を使用できる。
と思っています。

なので、set()でthis.valが変わった際に、なぜもう一度get()が実行されるのかがわかりません。
（get()は一回しか書いていないし、既に実行済みであるため。）

値が書き変わるたびに、処理をやり直しているのですか？

[maisumakun]

> 上から処理を実行していくと、

上から順に実行されるわけではありません。「プロパティへの書き込み」=「setの呼び出し」、「プロパティの呼び出し」=「getの呼び出し」というように処理が行われます。

[maisumakun]

> bの値を更新した場合、aの値が更新できる理由がわかりません。

「bの値を更新する」=「bのset()を呼び出す」、「aの値を取得する」=「aのget()を呼び出す」、という動作です。

[oden141]

> されません。get()の返り値は、呼んだ側に渡されるだけです。

set()の引数のvalue = get() の戻り値　ではないのですね？！

set() の引数は、set()を使用した側で指定していて、（<template>内のinputで入力した値）
set() を実行したときに this.val が書き変わる。

this.val() が書き変わったら、
this.val()が関係しているメソッドがすべて、もう一回実行される。

このような流れで合っておりますでしょうか…？

[oden141]

> 上から順に実行されるわけではありません。

なるほどです、ここの理解が違っていました。

> 「プロパティへの書き込み」=「setの呼び出し」、「プロパティの呼び出し」=「getの呼び出し」というように処理が行われます。

なんとなく理解できてきました。。

set(value) の引数に、
<template>内の<input>で取得した値が使われるのは、
v-model でaの値をバインドしているから、ですね。

納得できました、ありがとうございます。