社内勉強会の資料デス(wipデス)

■ Vue 3から新しく追加されるもの

- Composition API
- Teleport
- Fragment
- Emit Component Option

■ Composition API

Vue 3の目玉機能。React Hooks的な関数ベースで状態の作成・監視などができる。Custom Hooks的なこともできる。
Composition APIのCustom Hooks集のライブラリもある(https://github.com/antfu/vueuse)
触ってみるのが一番早い(ハンズオン形式で触ってみる)

 ↓ Viteで作った雛形

■ Teleport

app.component('modal-button', {
 template: `
   <button @click="modalOpen = true">
       Open full screen modal! (With teleport!)
   </button>

   <teleport to="body">
     <div v-if="modalOpen" class="modal">
       <div>
         I'm a teleported modal! 
         (My parent is "body")
         <button @click="modalOpen = false">
           Close
         </button>
       </div>
     </div>
   </teleport>
 `,
 data() {
   return { 
     modalOpen: false
   }
 }
})

↑のような感じで、teleportで囲まれた要素をto属性で指定されたセレクタに文字通りテレポートする機能。modalとかに便利そう。
ReactのPortalみたいなやつ。

■ Fragment

これまでは1つのcomponentにルートとなる要素は1つと限定されていたけど、ルートが複数でも大丈夫になった。地味に嬉しい。

■ Emit Component Option

emitsオプションが追加された。カスタムイベントを使う時は明示してあげる。

■Vue 3で変わるもの

いくつかピックアップ

- v-model
- filter

詳しくはこちら↓

■Nuxt.jsのサポート

- Composition APIは2系でも、使えるので、積極的に使って良さそう。(https://www.npmjs.com/package/@vue/composition-api)
- ただし、vue3.0と比べて一部機能がまだ使えないとかがある模様。
- Nuxt.js公式のComposition APIが開発中なので、将来的にはこっちに移行した方が良さそう。(https://github.com/nuxt-community/composition-api)
- 将来的にリプレイスするコストがかかるけど、pagesは従来通りoptionalスタイルで書いて、componentsはComposition APIを使うのが良いのかな〜って感想