はじめに
Vue.js(Option api)のcomputedの部分のコードを読む際にあれ、いつも自分が書いている書き方とちょっと違うと戸惑った経験はないでしょうか？
最近、いつも自分がよく書く書き方と異なる書き方がされていて、なんでこの書き方で大丈夫なんだろうと感じたことがあったので整理してみました。
オブジェクトのメソッド定義の3通りの表現方法
Vue.jsのcomputed, method ではオブジェクトのメソッド定義(=関数プロパティ)が利用されます。
その場合のメソッド定義(=関数プロパティ)の表現方法は主に下記の３パターンあります。
(Vue.jsというより、Javascript(ECMAScript)の仕様ですが)
- アロー関数式を利用
- function式を利用
- メソッド定義のための省略構文を利用
オブジェクトのプロパティとして定義するため、1,2の場合はコロン[:]が必須ですが、3の場合はコロンの部分も省略できる構文であるためコロンは不要です。
3つの定義方法の違い
2,3の場合はfunction式として評価されますが、1はアロー関数として評価されます。
アロー関数は「文脈に依存せず、宣言された時点で、thisを確定（＝束縛）する」特徴があるので、1の関数式内でthisを利用すると、Vueインスタンスをthisとして解釈できずにエラーとなります。
(参考：Vue.jsに書いてある「アロー関数は、this が期待する Vue インスタンスではなく・・・」とは？)
コードでの例
export default {
name: 'SomeList'
data () {
return {
contents: []
}
},
computed: {
// 1: アロー関数式を利用
countOfInitialShowedContents: () => 10,
// 2: function式を利用
countOfContents1: function() {
return this.contents != null ? this.contents.size : 0
},
// 3: メソッド定義のための省略構文を利用
countOfContents2 () {
return this.contents != null ? this.contents.size : 0
},
}
メソッド定義のための省略構文(a shorter syntax for method definitions on objects initializers)とは
アロー関数式とfunction式については多くの方にとって馴染み深い表現だと思いますので、
ここでは「メソッド定義のための省略構文」 についてのみ記載させていただきます。
ECMAScript 2015から導入されたfunctionを利用したメソッド定義の省略形です。
このような表現で記述した場合は、↓のようにfunction式によるメソッド定義と同じように解釈されます。
省略構文(↓のfunction式で定義した場合と同様に解釈されます)
const obj = {
foo() {
// ...
},
bar() {
// ...
}
}
function式を利用した構文
const obj = {
foo: function() {
// ...
},
bar: function() {
// ...
}
}
まとめ
私も3の表現でVueのdataやcomputedをよく記載していたのですが、どのような仕様で実現しているのかをきちんと理解しておらず利用していました。
今回、調べてみたことで今後は自分の中で確信を持ってコーディングをすることができそうです。
もし、同じような疑問を持った方の参考になれば幸いです。
それでは、素敵なVueライフを。