【Vue.jsプログラミング学習第6回】computedで算出プロパティを扱おう

こんにちは、あべしんです。

Vue.jsプログラミング学習第6回はcomputedについて学んでいきます。

computedとは？
ソースコード
実行結果
methodsとの違い

computedとは？

computedは算出プロパティです。
もう少し具体的に言うと、何らかの処理をした結果のプロパティです。

過去の記事を読まれた方はVue側の data:{~~~} を何度も見てきたと思いますが、このdataの中身もプロパティです。
ただ、dataの方は単に一つの値をそのまま持つだけですが、computedの場合は持つ値が処理の結果で決まります。

とりあえずモノを見た方が手っ取り早いと思うので、さっそくソースコードを見ていきましょう！

ソースコード

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue.jsプログラミング学習 第6回</title>
</head>
<body>
    <div id="app">
        <input type="number" v-model="num1">
        <input type="number" v-model="num2">

        <p>掛け算結果：{{ resultNum1 }}</p>
        <p>足し算結果：{{ resultNum2 }}</p>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.js"></script>
    <script>
        let app = new Vue({
            el: '#app',
            data: {
                num1: 0,
                num2: 0
            },
            computed: {
                // 掛け算
                resultNum1: function() {
                    return this.num1 * this.num2;
                },
                // 足し算
                resultNum2: function() {
                    changeNum1 = parseInt(this.num1);
                    changeNum2 = parseInt(this.num2);
                    return changeNum1 + changeNum2;
                }
            }
        })
    </script>
</body>
</html>

10、11行目に数値を入力するinputタグを配置。
v-modelでdata内のnum1とnum2にバインドしてます。

13、14行目のpタグ内にresultNum1とresultNum2がありますね。
これが算出プロパティになります。

25行目以降がcomputed部分になります。
resultNum1とresultNum2の中身を見ると、ユーザーから入力された値(v-modelでバインドされたnum1とnum2)を使って計算し、その結果をreturnで返してます。
(32、33行目のchangeNum1とchangeNum2は数値変換した結果を入れてますが、とりあえずスルーでOKです)

このreturnで返した値が、13、14行目のresultNum1とresultNum2の値になるわけです。

それでは実行してみましょう！

実行結果

数値を入力すると計算結果が表示されます。

今回はメソッドを使用していないので、ボタンを押してどうたら…という動きはありません。

ただ、お気づきかもしれませんがcomputedの書き方はmethodsとよく似ていますね。
そこで、一応初心者の方の混乱を避けるために、computedとmethodsの違いを簡単に解説します！

methodsとの違い

結論、computedはプロパティ、methodsはメソッドという違いがあります。

まず書き方について。
methodsはメソッドなので、呼び出す時にメソッド名()というように引数用の()を付けますが、computedはプロパティなのでdata内のものと同じくプロパティ名だけで扱い、()は付けません。

次に処理についてですが、キャッシュの有無の違いがあります。
computedは一度値を算出すると値がキャッシュに記憶され、以降別のところから呼ばれた場合はキャッシュの値が使われるので、プロパティ内の処理は実施されません。
(つまりその分無駄がなくなるので処理が重くなりにくい)