UIT INSIDE

LINE UIT室の開発者による「最新のフロントエンド」をキャッチアップできる Podcast

  • オープニング
    00:00
  • 1. Fragment について
    00:54
  • 2. Fragment 利用時の注意点
    06:30
  • 3. 実装された経緯について
    08:10
  • 4. 今使うときの留意事項
    11:45
  • 5. クロージング
    14:45

ep.53 Vue 3 Study 『Vue.js にもやってくる Fragment』

2020/07/10
2072 views
HANATANI Takuma 緑豆はるさめ

@spring_raining が @potato4d に、 Vue 3 の Fragment について聞いてみました。

ゲスト

  • @potato4d
    • フロントエンド開発センター フロントエンドエンジニア

Vue 3 Study

  • UIT で行っている Vue 3 についての勉強会
  • Vue 3 の RFC を読みながら新しい機能を紹介

Vue 3 Fragment

Fragment でできること

  • これまでは root の <template></template> の直下は 1 要素しか受け付けなかった
    • root でなければ複数要素は許可されていたので、間に何らかのタグを挟むなどがあった
      • h1 とメインコンテンツをまとめたコンポーネントなら section を挟むなど
    • これからは複数要素を受け付けられるようになり、柔軟性が増す
      • 例えば dt / dd をまとめたコンポーネントを作りたい場合などに活用できる
    • Vue.js の場合は大きな変化はなさそう
      • React の場合は <template> に相当するタグがなかったので、見通しを良くするために各所に挟めるのが便利だった
      • Vue でも v-if のためだけの <template> を用意することがあるように
  • Fragment 利用時の注意点
    • コンポーネントの root 要素に、親コンポーネントから付与される属性が自動的に付与されなくなる
      • 親から class="xxx" といった属性を付与していたケースも多いハズ
      • Fragment を利用する場合、明示的に :bind="$attr" にて属性を付与してやる必要がある

なぜこれまで Fragment ができなかったのか

現時点での利用上の注意

  • Vetur (eslint-plugin-vue) が対応していないため、 vue/valid-template-root が発生する
    • 現時点ではまだ変更が取り込まれていない様子。
      • Vue 3 に合わせてバージョンアップされる?
    • Vue 3 beta にあげていて使いたい場合は、手元の .eslintrc.jsvue/valid-template-root をオフにしてやる必要がある
10秒前へ 10秒次へ