Vue Componentの省略記法について
2018-11-15
Vue にはいくつかの省略記法がありますが，Vue Component 内での記法の違いを初めて見たときは意味わからなかったので書き残しておきます．
例１
関数等の中身は重要じゃないので省きます．
sampleDefault.vue
<script>
export default {
name: 'SampleComponent',
data: function () {
return {
...
}
},
created: function () {
...
},
methods: {
sampleFunction: function () {
...
}
}
}
</script>
こういうコンポーネントがあったとして，function を省略すると次の例のようになります．
例２
sampleShorthand.vue
<script>
export default {
name: 'SampleComponent',
data () {
return {
...
}
},
created () {
...
},
methods: {
sampleFunction () {
...
}
}
}
</script>
たったこれだけのことです．ライフサイクルフックは別にどっちで書いても動くのでいいんですが，ドキュメントを深く読まなかったひよこの私には特に data プロパティが混乱を招く原因となりました．
data プロパティ
Vue インスタンスと Vue コンポーネントで書き分ける必要があります．
var vm = new Vue({
el: #sample,
data: {
num: 1,
},
});
export default {
name: "sampleComponent",
data() {
return {
num: 1,
};
},
};
上がインスタンスで，下がコンポーネントです．data プロパティの function を省略すると似通ってしまって，どう違うのかよくわからなくなります．
Vue コンポーネントには関数を使わなければならないため，このようなコードになります．
まとめ
意味がわかった後に振り返ると非常にレベルが低い．