vue3.0の新機能は何ですか

Evan You (You Yuxi) は、2018 年 11 月 16 日の朝、Vue Toronto での基調講演で Vue 3 をプレビューしました。最新のブラウザでサポートされる新機能を活用する Vue 3 は、私たちがすでに知っていて愛用している Vue.js の強力かつ改良されたバージョンになります。

要約すると、Vue 3 は次の点で期待に値します:

高速化

小型化

保守が容易になりました

ネイティブ サポートが強化されました

開発と使用が容易になりました

高速化:

仮想 DOM リライト

仮想 DOM リライトを使用すると、より多くのコンパイルが期待できます。実行時のオーバーヘッドを軽減するための時間ヒント。書き換えには、仮想ノードを作成するためのより効率的なコードが含まれます。

最適化されたスロット生成

現在の Vue バージョンでは、親コンポーネントが再レンダリングされると、その子コンポーネントも再レンダリングされる必要があります (11 月 20 日更新: この文は異なります)厳密で誤解を招きやすいので、説明する必要があると思います: 2.0 コンポーネントの再レンダリングはコンポーネントの粒度で行われます。変更されたデータがサブコンポーネントの小道具でない限り、サブコンポーネントの再レンダリングは行われません引用元：https://juejin.im/pin/5bf28ddd6fb9a056783705fc）。 Vue 3 では、親コンポーネントと子コンポーネントを個別に再レンダリングできます。

静的ツリー ホイスティング

静的ツリー ホイスティングを使用すると、Vue 3 のコンパイラが静的コンポーネントが何であるかを検出してホイストできるため、レンダリング コストが削減されます。ツリー構造全体にパッチを適用するプロセスをスキップできます。

静的プロップのホイスティング

さらに、Vue 3 がノードを変更しないパッチ適用プロセスをスキップする静的プロップのホイスティングも期待できます。

プロキシベースのオブザーバーメカニズム

現在、Vue のリアクティブ システムは Object.defineProperty のゲッターとセッターを使用します。ただし、Vue 3 は ES2015 プロキシをオブザーバー メカニズムとして使用します。これにより、以前に存在した警告がなくなり、速度が 2 倍になり、メモリのオーバーヘッドが半分節約されます。

IE11 のサポートを継続するために、Vue 3 は古いオブザーバー メカニズムと新しいプロキシ バージョンをサポートするビルドをリリースします。

より小さい:

Vue はすでに非常に小さく、実行時の圧縮後は約 20kb です。しかし、新しいコア ランタイムは gzip 圧縮されて約 10 kb になるため、さらに小さくなることが予想されます。これは主に、未使用のライブラリを削除することによって実現されます (ツリー シェーキングとも呼ばれます)。たとえば、transition 要素を使用していない場合、それは含まれません。

よりメンテナンス性が向上:

ほとんどの Vue 開発者はライブラリ自体に取り組んでいませんが、Vue 3 ではソース コードのメンテナンス性がさらに向上することを知ってうれしいです。 TypeScript を使用するだけでなく、多くのパッケージが分離され、すべてがよりモジュール化されます。

ネイティブ サポートの強化

ランタイム カーネルはプラットフォームに依存しないため、Vue があらゆるプラットフォーム (Web、iOS、Android など) で簡単に動作できるようになります。 。

開発と使用が簡単になりました

Observer モジュールが独自のパッケージに解凍され、新しい方法で使用できるようになりました

追跡レンダリング位置も楽になります。 Evan の講演では、ライブ コーディングを行い、(以下のコードを使用して) Vue アプリケーションをトレースしてコンポーネントの再レンダリングのトリガーを見つける方法を示しました。これは、大規模なアプリケーションやパフォーマンスの微調整に役立ちます。

Vue 3.0 では、TypeScript のサポートも強化され、高度な型チェックや、エディターで役立つエラーや警告が可能になります。

実験的フック API

Vue の 2 つのコンポーネント間で動作を共有する必要がある場合、通常は Mixins を使用します。ただし、Evan はフック API を使用して、Mixins による問題の一部を回避し、慣用的な Vue コードをより快適に使用できるようにしようとしています。

実験的なタイム スライシングのサポート

多くのコンポーネントが同時に再レンダリングを試行すると、ブラウザの速度が低下し、ユーザー エクスペリエンスが低下する可能性があります。

Evan は、処理すべきユーザー インタラクションがある場合に、タイム スライシングを使用して JS の実行をブラウザに提供される部分に分割する方法を示しました。

以上がvue3.0の新機能は何ですかの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。