データに何らかの処理を加えてその結果をプロパティとして扱いたい場合は、computedオプションを利用し算出プロパティとして記述します。
下記コードでは、messageデータの文字列を反転するメソッドによる処理結果をプロパティとして扱うために、computedオプションにcomputedMessageという名前の算出プロパティを定義しています。
|
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 |
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <script src="https://cdn.jsdelivr.net/npm/vue@2.6.6/dist/vue.js"></script> </head> <body> <div id="app"> <p><input type="text" v-model="message"></p> <p>{{ methodsMessage() }}</p> <p>{{ computedMessage }}</p> </div> <script> new Vue({ el: '#app', data: { message: 'あいうえお' }, methods: { methodsMessage: function () { return this.message.split('').reverse().join('') } }, computed: { computedMessage: function () { return this.message.split('').reverse().join('') } } }); </script> </body> </html> |
12行目
methodsオプションにおいて文字列を反転させるmethodsMessageメソッドを定義しています。11行目においてmethodsMessage()のようにメソッドで記述しているのに対して、算出プロパティであるcomputedMessageは、あくまでも「プロパティ」として表示させていることが確認できます。
メソッドによる実行との大きな違いは、算出プロパティにはキャッシュ機能があることです。
|
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 |
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <script src="https://cdn.jsdelivr.net/npm/vue@2.6.6/dist/vue.js"></script> </head> <body> <div id="app"> <ol> <li>{{ methodsMessage() }}</li> <li>{{ methodsMessage() }}</li> <li>{{ methodsMessage() }}</li> </ol> <ol> <li>{{ computedMessage }}</li> <li>{{ computedMessage }}</li> <li>{{ computedMessage }}</li> </ol> </div> <script> new Vue({ el: '#app', methods: { methodsMessage: function () { return Math.random(); } }, computed: { computedMessage: function () { return Math.random(); } } }); </script> </body> </html> |
methodsMessageメソッドによる実行はキャッシュされないため、呼び出されるごとに常に違う数値を返しているのが確認できます。一方、算出プロパティであるcomputedMessageプロパティはキャッシュにより同じ数値が表示されているのが確認できます。
このキャッシュされた値はVue.jsによって管理されたデータ、つまりリアクティブなデータにおいてその値が変化した時に自動的に感知し更新されます。上記のMath.random()による値はJavaScript本来の関数によるものでリアクティブなデータではないため、上記コードにおいては画面自体を更新しない限りずっと同じ値としてキャッシュされ続けます。
算出プロパティに対してその値を取得する（getter）だけでなく、書き込み（setter）するには下記のようにsetを用意する必要があります。
|
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 |
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <script src="https://cdn.jsdelivr.net/npm/vue@2.6.6/dist/vue.js"></script> </head> <body> <div id="app"> <p><input v-model="fullName"></p> <p>苗字: {{ lastName }}</p> <p>名前: {{ firstName }}</p> </div> <script> new Vue({ el: '#app', data: { firstName: '治', lastName: '太宰' }, computed: { fullName: { get: function () { return this.lastName + ' ' + this.firstName }, set: function (value) { this.lastName = value.split(' ')[0] this.firstName = value.split(' ')[1] } } } }); </script> </body> </html> |
これまで説明してきた算出プロパティの通常の呼び出し、つまりgetterには戻り値（return）が必要となります。また11行目において算出プロパティであるfullNameのフォームを設置していますが、もしsetterを用意せずに編集しようとするとエラーになります。
getterおよびsetterについては以下の関連ページをご覧下さい。
参照ページ
Vue.js 算出プロパティ
