【vue】 methods、computed、watchの違い

2022年2月18日2022年4月24日 souki202

methods、computed、watchの3つは、いずれも関数と同様に処理を書きます。

そこで、それぞれの違いを把握して、適切に使い分けられる様になる必要があります。

それぞれの書き方などについてはこちら

【vue】メソッドの書き方と呼び出す方法

vueにはメソッド(関数)を設定できます。設定したメソッドは、vueのスクリプトからだけでなく、HTML側にクリック時の挙動などでも呼び出す設定…

【vue】 watchを使って値の変化時に自動で処理を実行する

監視プロパティとも呼ばれます。`computed`と似ており、監視している値に変更があれば自動的に実行されるものです。しかし、`watch`で…

【vue】 computedで自動で再計算する

算術プロパティと呼ばれる機能です。`data`が固定の値を出力するのに対し、`computed`は計算した値を出力するというものです。書き方は`…

1 methods
2 computed
3 watch
4 methods, computed, watchの違いのまとめ
5 まとめ

methods

中にロジックを書き、様々な処理をするのに向いています。

値の状態に関わらず、任意のタイミングで呼び出して使用できます。

const app = Vue.createApp({
    data() {
        return {
            text: "",
        }
    },
    methods: {
        reset() {
            this.text = "";
        }
    }
});

See the Pen by Totori (@souki202) on CodePen.

手動で呼び出して何かを処理させたい場合に使用します。

また、戻り値を普通のメソッドのように使うことができます。

const app = Vue.createApp({
    methods: {
        m1() {
            return 100;
        },
        m2() {
            // 600が代入される
            this.data = this.m1() + 500;
        }
    }
});

普通にreturn文を書き、普通のメソッドのように使うことができます。

また、asyncにすることが来ます。

const app = Vue.createApp({
    methods: {
        async m1() {
            return await axios.get(...);
        },
        async m2() {
            const result = await m1();
            // 色々処理
        }
    }
});

このように、普通のメソッドと同様に、asyncとawaitを使えます。

そのため、methodsは、要は普通の処理をしたいときに使用するものです。普通にメソッドを呼び出し、普通に戻り値を取得を取得する場合に用います。

computed

その関数内で利用する値が変化すると自動的に再計算されます。計算された値は裏でキャッシュされており、DOMが再描画されるときにはそのキャッシュされている値が使用されます。

そのため、DOMで計算した値を表示するのに適しています。

const app = Vue.createApp({
    data() {
        return {
            v1: 0,
            v2: 0,
        }
    },
    computed: {
        sum() {
            // v1かv2が更新されると自動で再計算
            return this.v1 + this.v2;
        }
    }
});

また、vue内でもthis.sumのように変数と同じ感覚で呼び出せます。

See the Pen vue1 compare1 by Totori (@souki202) on CodePen.

computedはすぐに計算結果を出せる必要があるため、asyncは利用できません。

上の例の場合、computedなら自動的に再計算されますが、methodsだとボタンなどを用意したり、イベントを書いたりしなければなければならない上に、計算した値を入れる変数を用意しなければなりません。

watchの場合、2つの変数を監視し、同じ処理をさせる必要があり非効率です。methodsと同様に計算した値を入れる変数も用意する必要もあるため、上のような例ではwatchも向いていません。

watch

特定の変数やオブジェクトを監視し、変化があればロジックが走ります。

ロジックを走らせるという点ではmethodsと同じですが、こちらは変数の変化があったときに自動で実行されるので、任意のタイミングで実行するわけではありません。

また、特定の値が変わったときに実行されるという点ではcomputedと同じですが、こちらでは戻り値が無視されます。つまり、内部のdataの値を書き換えたいと言う時に使用します。

つまり、特定の値が変わったら何かしらの処理したい、かつ内部の値を書き換えたり、送信などの処理をしたい、というときに適しています。また、裏で非同期でデータを取得するなど、aysncも利用できます。

const app = Vue.createApp({
    data() {
        return {
            v: 0,
            msg: "",
            foo: {
                bar: [10, 20, 30],
            },
        }
    },
    watch: {
        // this.v が更新されると自動で実行
        v() {
            this.msg = "";
            setTimeout(() => {
                this.msg = "送信完了";
            }, 1000);
        },
        // オブジェクトの中の特定の値の場合
        "foo.bar.1": {
            handler: function() {
                // ...
            }
        },
        "foo.bar": {
            handler: function() {
                // ...
            },
            deep: true, // オブジェクトの中全体を監視対象とする場合
        }
    }
});

See the Pen vue1 compare2 by Totori (@souki202) on CodePen.

methods, computed, watchの違いのまとめ

3つの機能の違いを見てみましょう。

	method	computed	watch
呼び出し	任意のタイミング	中で使用している変数が更新された時	指定した変数が更新された時
return文	使える (普通の関数と同じ)	ほぼ必須 (結果は変数のように使う+キャッシュ付き)	無意味
async指定	できる	できない	できる