関数型コンポーネントで呼び出せる、よく使うAPIまとめ

関数型コンポーネントで使えるAPI

関数型コンポーネントで使えるのは、データなど静的なAPIがメインになります。

• name
• props
• data
• filters

動的な計算としては、filtersなど一部のAPIが使えます。

propsで受け取れる値

関数型コンポーネントのpropsで受け取れる値は下記の通りになります。関数型コンポーネント内部でfunctionを実行たい場合は、親コンポーネントからpropsで渡します。

• String：文字列：’1’
• Number：数値：1
• Boolean：真偽値：true, false
• Function：関数：function() {}
• Object：オブジェクト：{ name: ‘foo’ }
• Array：配列：[1, 2, 3], [{ id: 1 }, { id: 2 }]
• カスタム：インスタンス：new Cat()
• null：すべての型：1, ‘1’, [1]

参考：Vue.jsで関数型コンポーネントの中で@clickでmethodを実行する

関数型コンポーネントで使えないAPI

関数型コンポーネントは、リアクティブ出ないので、ライフサイクルフック・関数系など動的な変更が伴うAPIが使えません。

• components
• methods
• computed
• beforeCreate
• created
• beforeMount
• mounted
• beforeUpdate
• updated
• activated
• deactivated
• beforeDestroy
• destroyed
• errorCaptured
• directives

createdなどを書いても、関数型コンポーネントでは発火自体がしません。

また、componentsやmethodsを登録しても、設定がないことになります。

関数型コンポーネントで使える・使えないAPIをまとめてみました。

制限は多いですが、ボタンなど小さなパーツでは多用するので、使えないAPIを必要としないコンポーネントでは活用すると良いですね。