[Vue.js] dataオブジェクトの返し方

概要

() => ({})

Vue.component('button-counter', {
  data: () => ({
    count: 0
  }),
...

ネットでVueについて調べていた時のこと。
上記のような書き方を見つけて、？？？となった。

いまはむかし

es6以前

Vue.component('button-counter', {
  data: function () {
    return {
      count: 0
    }
  },
  methods: {
    hoge: function () {
...

今となってはこう書くことはないが、勉強し始めのころは、functionを使って書いていた。

es6以後

Vue.component('button-counter', {
  data: () => {
    return {
      count: 0
    }
  },
  methods: {
    hoge() {
...

es6を覚えてからは、functionをアロー関数で書くようになり、これでしばらく満足していた。

なにそれ

?

Vue.component('button-counter', {
  data: () => ({
    count: 0
  }),
  methods: {
    hoge() {

なんだこの波かっこを丸かっこで囲む書き方は...
returnはどこ行った...？
そんなことを思いつつ、MDNで調べてみた。
調べてみると、アロー関数のページにお目当てのことが書いてあった。

高度な構文
// object リテラル式を返す場合は、本体を丸括弧 () で囲みます:
params => ({foo: bar})

オブジェクトを返す場合には、丸かっこで囲ってあげれば、書いたまま返してくれるようだ

ほかのプロパティと同じ段にデータが記述されて、可読性も向上！
いい感じ！

感想

MDNは最強！
知っているつもりのことでもMDNを見直すことで、再発見があるかもと思い知らされた...