VueJS系で使われているJavaScript（ES2015）の記法のわけがわからなかったので調べてみた。

VueJSに限らないですが、最近のJavaScriptフレームワークの書き方を見ていると、記法の意味がわからない箇所が時々あります。
調べてみました。
VueJS系のモジュールを見ていきます。

「functaion」の省略

// VueJS 3

<script>
const Counter = {
  data() {
    return {
      counter: 0
    }
  },
  mounted() {
    setInterval(() => {
      this.counter++
    }, 1000)
  }
}
Vue.createApp(Counter).mount('#counter')
</script>

上記の「data()」や「mounted()」の箇所です。
オブジェクトなのになんで「キー: 値」の形式で書かれてないのかよく迷います。
下記と同じで、つまりはdataプロパティやfunctionプロパティの値が関数でした。

メソッド定義 - JavaScript | MDN

// VueJS 3

<script>
const Counter = {
  data: function() {
    return {
      counter: 0
    }
  },
  mounted: function() {
    setInterval(() => {
      this.counter++
    }, 1000)
  }
}
Vue.createApp(Counter).mount('#counter')
</script>

まとめると、下記2つが同じです。

key_name() {
}

key_name: function() {
}