🦔
Vue3 Composition API Vue.jsハンズオン輪読会Vol.1
この記事は何？
- 株式会社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までお願いします👍
Discussion