Vue 3.5 "天元突破グレンラガン" リリース

xguru · 2024-09-06T10:16:02+09:00

今回のマイナーリリースには内部改善と便利な新機能が含まれており、互換性を壊す変更はなし Reactivity システムの最適化 Vue のリアクティブシステムが大規模にリファクタリングされ、パフォーマンス向上とメモリ使用量の改善（-56%）を実現し、動作の変更はなしリファクタリングにより、SSR 中の計算値およびメモリの問題を解決 3.5 では大規模で深いリアクティブ配列に対するリアクティビティ追跡を最適化し、一部のケースで最大 10 倍高速化 Reactive Props Destructure リアクティブな Props の分割代入が 3.5 で安定化され、デフォルトで有効化で defineProps 呼び出しから分割代入された変数は、今後はリアクティブに動作この機能は JavaScript の標準的なデフォルト値構文を活用し、デフォルト値付き props の宣言を大幅に簡素化 SSR の改善点 Lazy Hydration 非同期コンポーネントは defineAsyncComponent() API の hydrate オプションを通じて戦略を指定し、ハイドレーションのタイミングを制御可能 useId() useId() は、サーバーとクライアントのレンダリング間で安定して保証される、アプリケーションごとの一意な ID を生成するために使える API フォーム要素やアクセシビリティ属性用の ID を生成でき、ハイドレーション不一致なしで SSR アプリケーションで利用可能 data-allow-mismatch クライアントの値がサーバーの値と異ならざるを得ない場合（例: 日付）、data-allow-mismatch 属性でハイドレーション不一致の警告を抑制可能属性に値を指定することで、許容する不一致の種類を制限することも可能（text, children, class, style, attribute）カスタムエレメントの改善点 3.5 では defineCustomElement() API に関する多くの長年の問題を修正し、Vue でカスタムエレメントを作成するための複数の新機能を追加 configureApp オプションを通じて、カスタムエレメント向けのアプリ構成をサポート useHost()、useShadowRoot()、および this.$host API を追加し、カスタムエレメントのホストエレメントおよび shadow root へアクセス可能に shadowRoot: false を渡すことで、Shadow DOM なしでカスタムエレメントをマウントすることをサポート nonce オプションの指定をサポートし、これはカスタムエレメントによって注入されるタグに付与されるその他の注目機能 useTemplateRef() 3.5 では useTemplateRef() API により、テンプレート参照を取得する新しい方法を導入 3.5 以前は、変数名を静的な ref 属性と一致させる通常の参照を使うことが推奨されていた以前のアプローチは、ref 属性をコンパイラが解析できる必要があったため、静的な ref 属性に限定されていたこれに対して useTemplateRef() は、ランタイム文字列 ID を通じて参照を一致させるため、変化する ID に対する動的な参照バインディングをサポート遅延 Teleport 組み込みのコンポーネントの既知の制約は、teleport コンポーネントがマウントされる時点で対象要素が存在していなければならないことこのため、ユーザーが Vue によってレンダリングされた別の要素へコンテンツを teleport することが妨げられていた 3.5 では、現在のレンダリングサイクル後にマウントされる向けに defer prop を導入し、これが動作するようになった onWatcherCleanup() 3.5 では、ウォッチャーでクリーンアップコールバックを登録するためのグローバルインポート API である onWatcherCleanup() を導入

(blog.vuejs.org)

6 ポイント投稿者 xguru 2024-09-06 | 3件のコメント | WhatsAppで共有

今回のマイナーリリースには内部改善と便利な新機能が含まれており、互換性を壊す変更はなし

Reactivity システムの最適化

Vue のリアクティブシステムが大規模にリファクタリングされ、パフォーマンス向上とメモリ使用量の改善（-56%）を実現し、動作の変更はなし
リファクタリングにより、SSR 中の計算値およびメモリの問題を解決
3.5 では大規模で深いリアクティブ配列に対するリアクティビティ追跡を最適化し、一部のケースで最大 10 倍高速化

Reactive Props Destructure

リアクティブな Props の分割代入が 3.5 で安定化され、デフォルトで有効化
<script setup> で defineProps 呼び出しから分割代入された変数は、今後はリアクティブに動作
この機能は JavaScript の標準的なデフォルト値構文を活用し、デフォルト値付き props の宣言を大幅に簡素化

SSR の改善点

Lazy Hydration

非同期コンポーネントは defineAsyncComponent() API の hydrate オプションを通じて戦略を指定し、ハイドレーションのタイミングを制御可能

useId()

useId() は、サーバーとクライアントのレンダリング間で安定して保証される、アプリケーションごとの一意な ID を生成するために使える API
フォーム要素やアクセシビリティ属性用の ID を生成でき、ハイドレーション不一致なしで SSR アプリケーションで利用可能

data-allow-mismatch

クライアントの値がサーバーの値と異ならざるを得ない場合（例: 日付）、data-allow-mismatch 属性でハイドレーション不一致の警告を抑制可能
属性に値を指定することで、許容する不一致の種類を制限することも可能（text, children, class, style, attribute）

カスタムエレメントの改善点

3.5 では defineCustomElement() API に関する多くの長年の問題を修正し、Vue でカスタムエレメントを作成するための複数の新機能を追加
configureApp オプションを通じて、カスタムエレメント向けのアプリ構成をサポート
useHost()、useShadowRoot()、および this.$host API を追加し、カスタムエレメントのホストエレメントおよび shadow root へアクセス可能に
shadowRoot: false を渡すことで、Shadow DOM なしでカスタムエレメントをマウントすることをサポート
nonce オプションの指定をサポートし、これはカスタムエレメントによって注入される <style> タグに付与される

その他の注目機能

useTemplateRef()

3.5 では useTemplateRef() API により、テンプレート参照を取得する新しい方法を導入
3.5 以前は、変数名を静的な ref 属性と一致させる通常の参照を使うことが推奨されていた
以前のアプローチは、ref 属性をコンパイラが解析できる必要があったため、静的な ref 属性に限定されていた
これに対して useTemplateRef() は、ランタイム文字列 ID を通じて参照を一致させるため、変化する ID に対する動的な参照バインディングをサポート

遅延 Teleport

組み込みの <Teleport> コンポーネントの既知の制約は、teleport コンポーネントがマウントされる時点で対象要素が存在していなければならないこと
このため、ユーザーが Vue によってレンダリングされた別の要素へコンテンツを teleport することが妨げられていた
3.5 では、現在のレンダリングサイクル後にマウントされる <Teleport> 向けに defer prop を導入し、これが動作するようになった

onWatcherCleanup()

3.5 では、ウォッチャーでクリーンアップコールバックを登録するためのグローバルインポート API である onWatcherCleanup() を導入

3件のコメント

2024-09-06

[このコメントは非表示になっています。]

narusas 2024-09-06

今回のリリースは、実際にコンポーネントを開発するときの利便性がかなり上がっていますね

xguru 2024-09-06

今回のバージョン名は「天元突破グレンラガン」なんですね。（名作ですよね！私が見たガイナックス作品ではこれが最後だった気がします）

Vue は伝統的に？アニメや漫画のタイトルを採用してきました。1.0はエヴァンゲリオン、2.0は攻殻機動隊、3.0はワンピース、3.3はるろうに剣心、3.4はスラムダンク
https://en.wikipedia.org/wiki/Vue.js#Versions