質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

88.04%

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

受付中

回答 1

投稿

  • 評価
  • クリップ 0
  • VIEW 71

score 1

質問内容

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>
  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 1

0

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

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

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

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

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2021/05/08 22:36

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

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

    キャンセル

  • 2021/05/08 22:42

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

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

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

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

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

    キャンセル

  • 2021/05/08 22:47

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

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

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

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

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


    ```
    <template>
    <div class="alert alert-primary">
    <h1>{{ title }}</h1>
    <p>{{ message }}</p>
    <hr>
    <p class="h5">val: {{val}}</p>
    <div class="form-group text-left">
    <label>* 2:</label>
    <input type="number"
    v-model="a" class="form-control">
    </div>
    <div class="form-group text-left">
    <label>^ 2:</label>
    <input type="number"
    v-model="b" class="form-control">
    </div>
    </div>
    </template>
    ```

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 88.04%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る