Vue Component の省略記法について

Vue にはいくつかの省略記法がありますが、Vue Component 内での記法の違いを初めて見たときは意味わからなかったので書き残しておきます。

例1

関数等の中身は重要じゃないので省きます。

<template>
  ...
</template>

<script>
export default {
  name: 'SampleComponent',
  data: function () {
    return {
      ...
    }
  },
  created: function () {
    ...
  },
  methods: {
    sampleFunction: function () {
      ...
    }
  }
}
</script>

<style>
  ...
</style>

こういうコンポーネントがあったとして、function を省略すると次の例のようになります。

例2

<template>
  ...
</templates>

<script>
export default {
  name: 'SampleComponent',
  data () {
    return {
      ...
    }
  },
  created () {
    ...
  },
  methods: {
    sampleFunction () {
      ...
    }
  }
}
</script>

<style>
  ...
</style>

たったこれだけのことです。ライフサイクルフックは別にどっちで書いても動くのでいいんですが、ドキュメントを深く読まなかったひよこの私には特に data プロパティが混乱を招く原因となりました。

data プロパティ

Vue インスタンスと Vue コンポーネントで書き分ける必要があります。

var vm = new Vue({
  el: #sample,
  data: {
    num: 1
  }
})
export default {
  name: 'sampleComponent',
  data () {
    return {
      num: 1
    }
  }
}

上がインスタンスで、下がコンポーネントです。data プロパティの function を省略すると似通ってしまって、どう違うのかよくわかりません。

Vue コンポーネントには関数を使わなければならないため、このようなコードになります。インターネットからコピペしてると意味わからなくなります。それだけです。

まとめ

意味がわかった後に振り返ると非常にレベルが低い。