コンポーネントの props で required を付けるときは default を定義した方がよさそう

小ネタですみませんが、Vue.js #4 Advent Calendar 2017 の15日目が空いてたので書きます。最近、Vue.js を実案件で使い始めました。Vue.js 歴は浅いです。

タイトルの通りなんですが、誤りや本来はこうあるべきというのがあればご指摘いただけますと幸いです。

Vue.js のスタイルガイドの「プロパティの定義」というセクションに「プロパティの定義はできる限り詳細とするべきです。」と書かれています。

というわけで、

props: [ 'count' ]

と書いていたところをスタイルガイドの例に倣って次のように変更してみました。

props: {
  count: {
    type: Number,
    required: true
  }
}

が、コンソールに警告が出るようになりました。

[Vue warn]: Invalid prop: type check failed for prop "count". Expected Number, got Undefined.

で、このメッセージでググってみたら、この issue を発見。

この issue 自体は単純な定義ミスが原因のようなんですが、なんとなく 初期値をセットした方がよさそう なのかなと思い付きました。というわけで、次のように default を定義してみたところ、先述の警告は出なくなりました。

props: {
  count: {
    type: Number,
    required: true,
    default: 0 // これを追加
  }
}

ちなみに、required を外すと default が未定義でも先述の警告は出ないようです。

なんとなく、required と default は一緒に定義するものなのかな？と思ったんですが、ドキュメントを探しても特にこれといったものは見つからず...。もしくは、コンポーネントの呼び出し方が原因なんだろうか。

このあたりは仕組みをきちんと理解しないとだめですね...。中途半端ですみませんが、現場からは以上です。