vue.js の moutend , watch

Question

vue.jsでチュートリアルをしています。
以下、両方動くのですが、なぜ moutend を使うのか理由を教えてください。

https://jp.vuejs.org/v2/cookbook/client-side-storage.html#%E8%A4%87%E9%9B%91%E3%81%AA%E5%80%A4%E3%82%92%E6%89%B1%E3%81%86

・チュートリアル

const app = new Vue({
  el: '#app',
  data: {
    name: ''
  },
  mounted() {
    if (localStorage.name) {
      this.name = localStorage.name;
    }
  },
  watch: {
    name(newName) {
      localStorage.name = newName;
    }
  }
});

・僕が改変したコード
こちらのがスッキリして見やすい気もしますが・・・。

    const app = new Vue({
        el: '#app',
        data: {
            name: ''
        },

        //name の値が変更されたら localStorage.name に突っ込む
        watch: {
            name(d) {
                localStorage.name = d;
                this.name = d;
            }
        }
    });

チュートリアルのコードをあえて mounted を使っているのは理由があると思います。
その理由がわかりません。

よろしくおねがいします。

Answer 1

たしかに「両方動く」かもしれませんが、挙動が異なります。

---

公式のサンプル

アプリの起動(new Vue({...}))から以下の動作になります。

1. nameの初期値に空文字列''がセットされる
2. コンポーネントがマウントされ、mounted()が呼ばれる
3. localStorageにnameがあれば、それをthis.nameに代入する
4. (3)でthis.nameが変更された場合、監視用の関数name()が呼ばれる
5. localStorage.nameにnewNameが保存される

その後、ユーザーの操作で以下の動作になります。

1. ユーザーがテキストフィールドで名前を入力する(変更する)
2. v-model="name"により、コンポーネントのデータnameが更新される
3. 監視用の関数name()が呼ばれる
4. localStorage.nameにnewNameが保存される

---

ma7ma7pipipiさんのコード

アプリの起動(new Vue({...}))から以下の動作になります。

1. nameの初期値に空文字列''がセットされる

その後、ユーザーの操作で以下の動作になります。

1. ユーザーがテキストフィールドで名前を入力する(変更する)
2. v-model="name"により、コンポーネントのデータnameが更新される
3. 監視用の関数name()が呼ばれる
4. localStorage.nameにnewNameが保存される
5. コンポーネントのデータnameにnewNameが保存される

---

両者の違いは「コンポーネントをマウントした時、localStorageの値をnameに代入し、フォームに表示しているか」です。

公式のサンプルでは、mounted()が呼ばれた際には(5)の挙動が1回目は無駄な動作になります。
もとをたどれば、localStorage.nameをthis.nameに代入して、その値を再度localStorage.nameに代入しているからです。
ただし、2回目以降は「フォームの値に基づいてlocalStorage.nameを更新する」意味のある記述になります。

ma7ma7pipipiさんのコードでは、例えば２回目以降のアクセスでlocalStorageの値があったとしてもフォームに表示されないので、保存しておく意味が意味が（少なくとも今回の場面では）ないと思います。

また、ma7ma7pipipiさんのコードでは、(2)でコンポーネントのデータを更新しているにもかかわらず、(4)で再度代入していますが、これは無駄な動作です。watchで設定する関数は「データが更新された時に呼ばれる」関数であるからです。

Comments

[ma7ma7pipipi]

ありがとうございます。
僕のコードでは 入力した内容を そのまま 入力した内容に 反映。
させていたのですね。

勉強になりました。

[NozomuIkuta]

参考になったようであれば幸いです