Web開発

【Vue + vue-cli】method、computed、watchについて

目次

1. methodについて
2. computedについて
3. watchについて
4. まとめ

今回はVueでよく使われるオブジェクトであるmethod、computed、watchの三つについて触れていきたいと思います。

使用データは毎回同様下記記事のデータを使います。

ですので、下記を未読の方は先に下記をご覧いただくことをお勧めします。
https://www.dailyupblog.com/web_development/742/

なお、使用データに関しては、vue-cliを使用しています。

それではいきましょう。

methodについて

まずmethodについてです。

methodは通常のJavascriptでもよく使われるいわゆるメソッド（関数）のことです。

性質としては、何かアクションが起きた時などの自分の好きなタイミングでアクセス可能であり、実行する度に再描画します。

まあ、要するにお馴染みの関数ですね。

使い方としては以下のようになります。

「pages」フォルダの中のTop.vueファイルを開いて下記を入力してください。

<template>
  <main>
    <div>
      <h2>{{inputText}}</h2>
      <button @click="showMessage()">ボタンを押してね</button>
    </div>
  </main>
</template>

<script>
export default {
  data () {
    return {
      inputText: ""
    }
  },
  methods: {
    showMessage: function () {
      this.inputText = "Hello World!";
    }
  },
}
</script>

<style scoped>
main {
  height: calc(100vh - 152px);
  padding: 3% 0;
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  align-items: center;
}
h2 {
  margin: 0;
}
</style>

methodはvueインスタンスの中にオブジェクトとしてmethod{}を追記することその中にで定義することができます。

基本的に「関数名: function(){}」で記述します。

今回はボタンをクリックすることで 「Hello World」という文字列を表示させる単純なメソッドにしました。

HTMLにbuttonタグを追記して、「@click=」でこの関数を呼び出すと実行するようにしています。

computedについて

computedは、いわゆる「算出プロパティ」と呼ばれるもので、値が変更すると、その値に依存している全ての値を更新するものです。

例えば、ユーザーが入力欄の値を変更した時、それに依存するような他の値が連動して変更したりする挙動をします。

ですが、リアクティブな依存関係がない場合は更新されません。

言葉では説明しづらいので、次の例をご覧ください。

先ほどと同じくTop.vueを開いて下記を入力してください。

<template>
  <main>
    <div>
      <input type="number" v-model="result" />
      × 2 = {{ double }}
    </div>
  </main>
</template>

<script>
export default {
  data () {
    return {
      result: ""
    }
  },
  computed: {
    double: function () {
      return this.result * 2;
    }
  }
}
</script>

<style scoped>
main {
  height: calc(100vh - 152px);
  padding: 3% 0;
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  align-items: center;
}
h2 {
  margin: 0;
}
</style>

上記例は、入力した数値が2倍された答えを表示する例です。

「computed」はmethodと同じようにvueインスタンスの中にオブジェクトとして追記します。

そしてその中に関数を書きます。

今回はinputタグに入力された値を入力されると同時に監視して、それに伴い、答えの数値もリアルタイムで更新されるため、「v-model」を使います。

v-modelについては後日説明しますが、簡単に説明すると、inputなどのフォーム要素の双方向バインディングを実現するモノです。

inputタグにこのv-modelを使ってあらかじめdataで宣言しておいた変数resultを値に入れておきます。

そして、computedの中で定義したdouble関数の中で変数resultを二倍した値を返します。

そうすると、入力欄で数値を変更すると、それに応じて、答えがリアルタイムで変更します。

watchについて

watchはcomputedと似ていますが、リアクティブな依存関係によって更新されません。

インスタンスにセットされているプロパティを常に監視し、その値に何か変化があった場合にそれをトリガーとして、複雑な処理などを記述することができます。

下に例を挙げてみました。

同じようにTop.vueを開いて、下記を記述して見てください。

<template>
  <main>
    <div>
      <input type="text" v-model="inputText" />
      <p>{{ resultText }}</p>
    </div>
  </main>
</template>

<script>
export default {
  data () {
    return {
      inputText: "",
      resultText: ""
    }
  },
  watch: {
    inputText: function () {
      this.resultText = this.inputText;
    }
  }
}
</script>

<style scoped>
main {
  height: calc(100vh - 152px);
  padding: 3% 0;
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  align-items: center;
}
h2 {
  margin: 0;
}
</style>

上記例は、inputに入力されたデータをリアルタイムでフォームの下に表示する例です。

watchも同じようにvueインスタンスの中にオブジェクトとして、追記し、その中に関数を記述していく形になります。

今回の例を見ていくと、v-model指定しているinputTextというデータを監視するため、watchの中にinputTextという同名の関数を記述しています。

これでデータの監視が可能です。

関数の中は、このinputTextデータに変更があった場合に、resultTextという変数に代入しています。

そして、resultText変数をHTML上でpタグにて表示しています。

こうすることでinputTextデータに何か変更が生じた際（ユーザーによる入力）に、この処理が呼び出され、v-modelによって、常に表示されるテキストを変更させることができます。

watchはcomputedと似ていますが、こう見ると返り値が使えないなど、根本的に使い方が異なります。

まとめ

今回はVueでよく使うmethod、computed、watchについて触れました。

それぞれの特性を理解し、使いこなすことができれば、かなり役に立つと思うので、ぜひマスターしましょう。

今回は概要と基本についてやりましたが、もっと奥が深いのです。

より理解を深めていけたらいいと思います！

それでは今回はここまで！

お疲れ様でした。

以下、Vue公式の解説です。

イベントハンドリング
https://jp.vuejs.org/v2/guide/events.html

算出プロパティとウォッチャ
https://jp.vuejs.org/v2/guide/computed.html