beta

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

Vue.jsの高速化でよく使う関数型コンポーネントですが、使える・使えないAPIをよくわかってなかったのでまとめてみました。

公開日:2020年5月4日

関数型コンポーネントで使える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を必要としないコンポーネントでは活用すると良いですね。