Vue.jsのプロパティやウォッチャについて公式ドキュメントを抽象的に理解する3分クッキング

はじめに

(※　この記事はVue.jsを初めて日が浅い自分へのメモが主な目的です。2020/4/24現在：執筆継続中です）
Vue.jsを初めてから、まだ日が浅いのでわからないことも多いです。
最近、使い分けに困り悩んでいたのがcomputedやmethodsなどについてです。
どちらも最終的にはviewの表示する値を変更することができますが、その使い分けがよく分かっていません。
ちゃんと使い分けできるようにしようと思い、公式ドキュメントを読んでみました。
使わない知識は普段から忘れて行きがちなので、迷った時に見返したいと思うのですが、公式ドキュメントをまた全部読み直すみたいなことはしたくないので、要点まとめて行こうと思っています。

理解が進むたびに追加していく予定です。

ちなみに使い分けや特徴、説明については既に執筆されている方がいらっしゃるので、お探しの方はそちらをご覧ください。

特徴

computedの特徴

• 算出プロパティ
• 普通のプロパティと同じようにデータバインドできる
• 算出結果をキャッシュする
• 依存しているデータが変わるまではキャッシュから値が返る
• 依存データとはリアクティブな関係
• 呼び出す際に（）が不要
• （）が不要なため引数を伴う処理はできない
• defaultはgetter処理のみ
• 必要に応じてsetterが使える

computedの使用例

<template>
  <div>
    <p> {{ message }}</p>
  </div>
</template>

<script>
export default {
  data: function() {
    return {
      text: string,
    }
  },
  computed: {
    message() {
      return `Hello ${this.text}`;
    }
  },
}
</script>

methodsの特徴

• 画面の再描画のたびに計算し直す。
• 算出結果をキャッシュしない
• 呼び出す際に()が必要
• 引数を伴う処理ができる
• getterもsetterもどちらにも使える

methodsの使用例

<template>
  <div>
    <p> {{ getMessage() }}</p>
  </div>
</template>

<script>
export default {
  methods: {
    getMessage() {
      return `Hello World`;
    }
  },
}
</script>

watchの特徴

• computedと同じように依存データの変更によって再計算する
• リアクティブな関係
• 値を返却することはできない
• 依存するデータの変更に合わせて非同期処理をするといったcomputedでできない処理が可能

watchの使用例

<template>
 ...
</template>

<script>
export default {
  props: {
    userId: number,
  },
  data: function() {
    return {
      userName: string,
    }
  },
  watch: {
    userId: function() {
      await api.getUserName().then((res) => {
        userName = res.name;
      });
    },
  },
}
</script>