Vue3 Composition API Vue.jsハンズオン輪読会Vol.1

公開:2020/12/15
更新:2020/12/15
1 min読了の目安(約1100字TECH技術記事

この記事は何?

  • 株式会社iCAREで行われている、「Vue3 Composition API Vue.jsハンズオン輪読会」の資料を公開する記事
  • 引用元・書籍は、21Stepで体得 Vue.jsハンズオン

6.2 Composition API

Composition APIの特徴

  • コンポーネントオプションにsetup関数を指定
  • setup関数内で、dataやcomputed、methodsなどのオプションで定義していたプロパティや関数をreturnすることtemplateから参照できる

導入

  • Composition APIはVue3.xでは標準でimportできる
  • Vue2.xでは@vue/compositon-apiのパッケージからimport(Carely のフロントエンドもそうしています)

ref関数

  • ref関数を使うことでリアクティブな性質を持たすことができる
  • setup関数内でプロパティの値を参照するにはhoge.valueとする

関数(methodsオプション)

  • 変数形式で関数を定義

computed関数(computedオプション)

  • Options API同様、再計算した値を返す
  • computedをimportして使用

props

  • setup関数内の外に定義する
  • Options APIのときと同様の定義方法

reactiveなプロパティの定義

  • reactive関数と、readonly関数(@vue/composition-apiはサポート外)がある

reactive関数とref関数の違い

  • プロパティにネストが発生するならば、reactive関数。
  • そうでなければ基本は、ref関数。
  • setup関数内でref関数のプロパティを参照する場合は、.valueが必要。
  • 基本的に両者ともに、リアクティブなプロパティを定義できる

Demo

iCAREではフロントエンドエンジニアを募集しています!

また、Vue3、Composition API勉強会を毎週行っています。
そして、TypeScriptやGraphQLを使って型安全を保っています。

新しい技術やスキルを活かしたい方は→WantedlyもしくはTwitterのDMまでお願いします👍