News
Meetup
YouTube
Blog
書き起こし
2020/06/26 に公開
2369 views
このエピソードについて
@spring_raining が @potato4d に Vue 3 で追加される Teleport (Portal) について話を聴きました。
About Vue 3 Study
社内勉強会で開催している Vue 3 の勉強会企画
RFC を一つずつ追っていく
今は Vuex, Vue Router の新バージョンのウォッチも継続中
Guest
@potato4d
Teleport
いわゆる “Portal” の機能の Vue.js 版
仮想 DOM 上の親子関係を飛び越えて、別の場所にある DOM に対して要素をマウントする機能
Portal の必要性と嬉しさ
実 DOM 操作する時代が終わった開発環境における z-index の取り扱いの悩みを解消
頻出するのはモーダル
子孫ではスタックコンテキストが分けられてしまっているため被り順で問題が起こる
しかしモーダルの呼び出し元は子孫の要素
ただの仮想 DOM の範囲では解決できない
Portal がない状態ではいびつな解消法になりがち
ライフサイクルフックで実 DOM に反映する
リアクティブなデータ共有や Vuex でフラグを管理し、Rootで持つ
Portal を使うとこういったいびつな構造を生むことなく解決できる
Vue.js の Teleport について
Teleport の対象となるDOM要素を事前に用意する
転送したいコンポーネントを
<Teleport>
タグで囲い、
to
でセレクタを指定する
他のフレームワークでの Portal
React の Portal の話
使い心地は少し異なるものの、Reactにも同様の機能がある
https://ja.reactjs.org/docs/portals.html
Reactの
className
はDOM APIが由来
https://developer.mozilla.org/ja/docs/Web/API/Element/className
Vue.js がなぜ Teleport の名称を採用したか
Vue 2.x の現場では PortalVue がおすすめ
コアチームメンバーが開発した 2.x での Portal
https://github.com/LinusBorg/portal-vue
Refs
LINE 新卒採用 2024
https://linecorp.com/ja/career/newgrads/engineering/
キャリア採用はこちらから
https://linecorp.com/ja/career/position/475
BGM&SE
魔王魂/騒音のない世界/OtoLogic
1.0x
1.3x
1.5x