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

このエピソードについて

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

Vue 3 で導入される、実際には描画されない DOM 要素のようなもの
- Web 標準に DocumentFragment があり、それを Vue で表現している
  - https://developer.mozilla.org/ja/docs/Web/API/DocumentFragment
- React には React.Fragment あるいは <></> として既に導入されている
  - https://ja.reactjs.org/docs/fragments.html

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

Vue 2.x 時代では、コンポーネントのマウントロジックが outerHTML 依存だった
- そのため、描画対象となる DOM そのものを対象として完全なる置き換えをしている
- 単一の要素の DOM を置き換える都合上、1つの枠に2つ以上の DOM を入れることが不可能だった
Vue 3 では、ロジックの改善によって innerHTML 依存となっている
- これにより、root 要素でも Fragment の実現が容易となった
  - コード上も単に children を render しているだけの様子
  - https://github.com/vuejs/vue-next/blob/58b07069ad33c8a8e44cb47b81084a452dda2846/packages/runtime-core/src/renderer.ts
- 参考: https://github.com/vuejs/rfcs/blob/master/active-rfcs/0009-global-api-change.md#mounting-behavior-difference-from-2x

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