@potato4d が @inaoki.misato に Vue 3 で変わる Directive のアップデート内容について話を聞いてみました。

• ゲスト紹介
  • inaoki
    • UIT Front-End Dev 5 Team
    • LINE Wallet などのフロントエンド開発を担当
• Vue 3 Study について
  • UIT 内で行われている Vue 3 の新しい機能を学ぶ会
  • 社内で共有した内容は UIT INSIDE でも紹介
    • https://uit-inside.linecorp.com/episode/32
    • https://uit-inside.linecorp.com/episode/34
    • https://uit-inside.linecorp.com/episode/36
    • https://uit-inside.linecorp.com/episode/39
    • https://uit-inside.linecorp.com/episode/51
    • https://uit-inside.linecorp.com/episode/53
• 変更点の紹介
  • Directive arguments の中で変数を使えるようなった
    • v-bind:[foo] : :[foo]
    • v-on:[foo] : @[foo]
    • v-slot:[foo]: #[foo]
  • Custom Directive APIがリデザインされた
  • また、Directive に変更がない箇所でも、 Fragment の変更などによって考慮事項が増えた
• 実際の Directive 使用例
  • LINE Wallet の開発時、 intersection observer によるイベント表示を付与するために自作
    • 画像を lazy load したがったが、影響が大きい
    • Image コンポーネントのようなものを作るより、手軽かつ多様なパターンに対応できる
  • 新規案件では同様の処理を実行できる OSS の vue-observe-visibility を利用することが増えた
    • https://github.com/Akryum/vue-observe-visibility

Refs

• フロントエンドエンジニア / フロントエンド開発センター| 求人詳細 | LINE株式会社
  • https://linecorp.com/ja/career/position/475
• BGM: 騒音のない世界
  • https://noiselessworld.net/
• SE: 魔王魂
  • https://maoudamashii.jokersounds.com/

---

採用について

• LINEヤフー新卒採用
• LINEヤフー中途採用

使用素材・クレジット

• BGM&SE
  • 魔王魂
  • 騒音のない世界
  • OtoLogic