Vueのcomputedプロパティのgetterの役割について

Question

Vueのcomputedプロパティのgetterの役割についての質問です。

親コンポーネントと子コンポーネントの値の受け渡しについて調べておりますが、
getterの役割がよく分かりません。

getter部分をコメントアウトして実行すると、[Vue warn]: Getter is missing for computed property
が出ますが、入れても入れなくても同じ動きをします。

今回の例ですと、setterでemitするイメージは分かっているつもりですが、getterは何をしているのか、getterでreturnされたthis.valueは、どこが受け取っているかが分からず、質問させていただきました。

以下、getterありとgetterなしのgifになります。

【getterあり】

【getterなし】

該当のソースコード

【parent.vue】

<template>
  <div class="container">
    <div>
      <h2>入力フォーム</h2>
      <span>ID</span>
      <child v-model="input" />
    </div>
    <div>
      <h2>入力内容</h2>
      <span>{{ input }}</span>
    </div>
  </div>
</template>

<script>
import child from './child';

export default {
  components: {
    child,
  },
  data() {
    return {
      input: '',
    };
  },
};
</script>

【child.vue】

<template>
  <input v-model="inputValue" type="text" />
</template>

<script>
export default {
  props: {
    value: {
      type: String,
      default: '',
    },
  },
  computed: {
    inputValue: {
      set(value) {
        // console.log('set通過');
        // console.log('value:' + value);
        // console.log('this.value:' + this.value);
        this.$emit('input', value);
      },
      get() {
        // console.log('get通過');
        // console.log('this.value:' + this.value);
        return this.value;
      },
    },
  },
};
</script>

Comments

[dameo]

何が分からないのか分からないので、参考までに何が起こっているのかだけ書いておきます。

この例ではchildコンポーネントのinputValueプロパティが算出プロパティとして定義されています。
算出プロパティにはgetterが必須ですが、inputValueプロパティには存在していないので警告が出ています。
またinputValueプロパティはテンプレート上ではinput要素のvalueに双方向バインド(v-model)されているので、input要素の内容がinputValueプロパティと連動しているということになります。
そしてinputValue算出プロパティにはあまり使用されないsetterがあるので、input要素の内容が変更される度にinputValue算出プロパティのsetterが呼ばれます。
setterの中では引数でinput要素の内容が入ってきて、これをinputイベントとしてemitしています。
childコンポーネントのinputイベントはparentコンポーネントが購読し、内容をparentコンポーネントのinputプロパティに設定している(v-modelの意味)ので、結果的にテンプレート上のspan要素の内容テキストにも反映されます。

つまり、childコンポーネントのinput要素の内容はinputイベント発行時にそのまま内容がparentコンポーネントのinputプロパティに設定されてるので、childコンポーネントのinput要素の初期表示を除きgetterが使用されていないということです。

ご参考までに。

[takutsu]

不明瞭な質問の中で、ご丁寧に解説いただきありがとうございます。
setterとgetterの中に、console.log('set通過')といったコードを入れて実行すると、以下のようになりました。
ページアクセス時：getterのみ
テキスト入力時、setter→getter
今回の例ですと、setterでemitするイメージは分かっているつもりですが、getterは何をしているのか、getterでreturnされたthis.valueは、どこが受け取っているかが分からず、質問させていただきました。

[dameo]

変化のあったコンポーネントをレンダリングするときです。
今回のケースではchildコンポーネントでinputValueプロパティがテンプレート上のinput要素のvalueに双方向バインド(v-model)されていて、input要素に変化があった際にsetterが呼ばれます。
setterの中からこのコンポーネントinputイベントが発行されたため、それを購読しているparentコンポーネントのinputプロパティに反映されます。
ただinputプロパティに反映されると、双方向バインドなので、その値がchildにも反映され、レンダリングが発生し、結果としてgetterが呼ばれるということです。
parentコンポーネントのv-modelによるバインドは
v-bind:value="input"
v-on:input="input=$event"
に分解できるのですが、v-bindを消してあげればレンダリングは発生せず、getterも呼ばれません。

[takutsu]

ご回答いただきありがとうございます。
細かく分解して説明いただいたおかげで、getterの挙動が分かってきました。
回答にご記入いただければ、ベストアンサーにさせていただきたいと思います！

Answer 1

子コンポーネントにあるinput要素のvalueに双方向バインドしている算出プロパティinputValueのgetterが何のために存在し、どういうときに呼ばれるのかについて説明します。

getter処理の明示的呼び出し

この挙動を分かりやすくするために、まずは、親コンポーネントのtemplateに

<button @click="input='hoge'">hoge</button>

という内容を加えてみてください。読めば分かるとおり、親コンポーネントにhogeボタンが追加され、そのボタンをclickすると、親コンポーネントのinputプロパティが'hoge'に変わるようになります。

では、これを実際に動かすとどうなるのか見てみます(回答の最後にそのまま動くコード全文を載せておきます)。すると、いつもどおりの画面にボタンが追加されてます。追加されたhogeボタンを押すと、入力内容の下の文字列がhogeになるところまでは想定どおりだと思うのですが、同時に子コンポーネントの入力フォームの内容もhogeになっています。

入力フォームの内容もhogeになった理由

理由の説明はなかなか大変です。

1. 親コンポーネントのinputプロパティが'hoge'に変わる
2. (親要素のtemplateが<child v-model="input" />となっている＝子コンポーネントが親コンポーネントのinputプロパティと双方向バインドされている)
3. bindしている子コンポーネントのvalueプロパティも'hoge'に変わる
4. (子コンポーネントの算出プロパティinputValueのgetterが子コンポーネントのvalueプロパティに依存している＝子コンポーネントのvalueプロパティが変わると算出プロパティinputValueにbindしている要素は再描画しないといけない)
5. input要素が算出プロパティinputValueにbindしているので子コンポーネントを再描画する
6. input要素のvalueプロパティを設定すべく、算出プロパティinputValueのgetterが呼ばれる
7. getterは子コンポーネントのvalueプロパティの値'hoge'を返す
8. 子コンポーネントの入力フォームの内容もhogeになる

長々と書きましたが、
getterを呼ぶのはvue自身で、bindされた要素の属性に設定するたにgetterを読んでいます。
タイミングは再描画のときで、このタイミングはbindなどの依存関係によって決まります。

子コンポーネントの入力フォームの内容を直接変えた場合

最後に、子コンポーネントの入力フォームの内容を直接変えた場合の説明です。
ある程度理解されているようなので、端折りますが、emitされたevent.target.valueがそのまま親コンポーネントのinputプロパティに入って、以降は同じです。ただ再描画の際に取得したinputValueの値がinput要素のvalueの内容とすでに同じなので、何も起こらないだけです。

実験コード(全体)

<!DOCTYPE html>
<html lang="ja">

<head>
    <meta charset="utf-8">
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.js"></script>
    <script>
        const child = {
            template: `
                <input v-model="inputValue" type="text" />`,
            props: {
                value: {
                    type: String,
                    default: '',
                },
            },
            computed: {
                inputValue: {
                    set(value) {
                        console.log('set通過');
                        console.log('value:' + value);
                        console.log('this.value:' + this.value);
                        this.$emit('input', value);
                    },
                    get() {
                        console.log('get通過');
                        console.log('this.value:' + this.value);
                        return this.value;
                    },
                },
            },
        };
        const parent = {
            template: `
                <div class="container">
                    <div>
                        <h2>入力フォーム</h2>
                        <span>ID</span>
                        <child v-model="input" />
                    </div>
                    <div>
                        <h2>入力内容</h2>
                        <span>{{ input }}</span>
                    </div>
                    <!-- これ追加 -->
                    <button @click="input='hoge'">hoge</button>
                </div>`,
            components: {
                child,
            },
            data() {
                return {
                    input: '',
                };
            },
        };
        window.addEventListener('DOMContentLoaded', function() {
            new Vue({
                el: '#app',
                components: {
                    parent,
                },
            });
        });
    </script>
</head>

<body>
    <div id="app">
        <parent></parent>
    </div>
</body>

</html>

Comments

[takutsu]

ご回答いただきありがとうございます。
サンプルコードまで作っていただき、理解が深まりました。
拙い質問に対し、丁寧に対応いただきとても助かりました！

Answer 2

computed: {
    inputValue()
    {
        return this.value
    },
  },

参照するだけならこんな感じで、set/getを省略できる。
しかし、setを使用する場合は、関数ではなくオブジェクトを渡すので
明示的にgetされる場合はどう処理するかを書いてあげる必要がある。
（※参照するだけパターンは省略形と考えた方がよさそう）

Comments

[takutsu]

ご回答いただき、ありがとうございます。
このような書き方もできるということを知ることができました！