課題を持った人
Vue.jsにはcomputedとmethodsというよく似たVueコンストラクタのオプションオブジェクトがあるけど、どうやって使い分けたらいいの？
こういった要望に答えます。
スポンサードサーチ
computedとmethodsの比較
computed
- 算出プロパティ ※計算機能付きのプロパティ
- データそのものに何らかの処理を与えたものをプロパティにしたい(インスタンスに持たせて参照できるようにしたい)ときに用いる
- 計算結果をキャッシュする
- 一度計算を行った場合、再度関数を呼び出しても依存しているデータに変更がない限りキャッシュを返す
- プロパティなので呼び出し時の()はいらない
- getterとsetterが使える
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | <div id="#app"> {{ 算出プロパティ名 }} <!-- 算出プロパティの呼び出し方 --> </div> <!-- Vue.jsを読み込んでおく --> <script> new Vue({ // ... computed: { // 関数として実装、参照時はプロパティとして機能 算出プロパティ名: function() { // return ... } } }); </script> |
methods
- メソッド
- メソッドなので呼び出しには()がいる
- 計算結果をキャッシュしないので、一度計算を行った場合も関数を呼び出される度に再計算を行う
- 使えるのはgetterのみでsetterは使えない
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | <div id="#app"> {{ メソッド名() }} <!-- メソッドの呼び出し方1 --> <button @click="メソッド名">ボタン</button> <!-- メソッドの呼び出し方2 --> </div> <!-- Vue.jsを読み込んでおく --> <script> new Vue({ // ... methods: { メソッド名: function() { // 処理 } } }); </script> |
筆者
computedが再計算を行うのは、依存するデータが変わった時のみです。そのため、Vueインスタンスのデータではないもの(例えば現在日時やDOMの状態)が変化したとしても検知できないため再計算は行われません。この点には注意しなければいけません。
こんな風にcomputedとmethodsを使い分けよう
computedとmethodsは算出プロパティとメソッドなので、明確に異なるものなのですが、Vue.jsを勉強しはじめたばかりだと使い分けが曖昧になってしまいがちかなと思います。ここでは、こんな時はcomputed、こんな時はmethodsを使うといいと具体例を書きます。
こんな時はcomputedを使おう
例えば、ショッピングカートに入った商品の個数を変更すると、小計金額と合計金額(税込)が変わるような処理を作る場合は、computedがいいかと。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 | <!doctype html> <html lang="ja"> <head> <meta charset="utf-8"> <title>Vue.jsのcomputedとmethodsの使い分け</title> </head> <body> <div id="app"> <div> <ul v-for="item in items"> <li> <span>{{ item.name }}</span> | <span>{{ item.price }}円</span> * <span><input type="number" v-model:value="item.quantity">個</span> = <span>{{ item.price * item.quantity }}円</span> </li> </ul> <div>合計金額：{{ totalPriceWithTax }}円(税込)</div> </div> </div> <script src="https://cdn.jsdelivr.net/npm/vue@2.5.22/dist/vue.js"></script> <script> var items = [ { name: 'レモン', price: 100, quantity: 2 }, { name: 'りんご', price: 200, quantity: 1 }, { name: 'メロン', price: 800, quantity: 1 } ]; new Vue({ el: '#app', data: { items: items }, computed: { // 合計金額 totalPrice: function() { return this.items.reduce(function(sum, item) { return sum + (item.price * item.quantity); }, 0) }, // 合計金額(税込) totalPriceWithTax: function() { return Math.floor(this.totalPrice * 1.08); } } }) </script> </body> </html> |
- 小計金額は商品金額と個数に依存
- 合計金額も商品金額と個数に依存
- さらに、合計金額(税込)も合計金額(税別)に依存
こんな風にプロパティが依存関係にある場合は、プロパティ値が変わる度に自動計算してくれるので便利です。また、コードもすっきりとまとり見通しがよくなります。
こんな時はmethodsを使おう
クリック時、マウスオーバー時等、何かアクションが起きた時に処理を行うような場合はmethodsを使うといいです。先ほどのショッピングカートの例に購入ボタンの処理を加えてみました。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 | <!doctype html> <html lang="ja"> <head> <meta charset="utf-8"> <title>Vue.jsのcomputedとmethodsの使い分け</title> </head> <body> <div id="app"> <div> <ul v-for="item in items"> <li> <span>{{ item.name }}</span> | <span>{{ item.price }}円</span> * <span><input type="number" v-model:value="item.quantity"></span> = <span>{{ item.price * item.quantity }}円</span> </li> </ul> <div>合計金額：{{ totalPriceWithTax }}円(税込)</div> <button @click="doBuy">購入する</button> </div> </div> <script src="https://cdn.jsdelivr.net/npm/vue@2.5.22/dist/vue.js"></script> <script> var items = [ { name: 'レモン', price: 100, quantity: 2 }, { name: 'りんご', price: 200, quantity: 1 }, { name: 'メロン', price: 800, quantity: 1 } ]; var vm = new Vue({ el: '#app', data: { items: items }, computed: { // 合計金額 totalPrice: function() { return this.items.reduce(function(sum, item) { return sum + (item.price * item.quantity); }, 0) }, // 合計金額(税込) totalPriceWithTax: function() { return Math.floor(this.totalPrice * 1.08); } }, methods: { doBuy: function() { window.alert(this.totalPriceWithTax + '円のお買い上げです。ありがとうございました。'); } } }) </script> </body> </html> |
筆者
以上、Vue.jsのcomputedとmethodsの使い分けでした。すこしでも役に立てれば幸いです。
あわせて読みたい
スポンサードサーチ
スポンサードサーチ
