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 サイトの他の関連記事を参照してください。
ホットAIツール
Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ
AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。
Undress AI Tool
脱衣画像を無料で
Clothoff.io
AI衣類リムーバー
AI Hentai Generator
AIヘンタイを無料で生成します。
人気の記事
ホットツール
メモ帳++7.3.1
使いやすく無料のコードエディター
SublimeText3 中国語版
中国語版、とても使いやすい
ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境
ドリームウィーバー CS6
ビジュアル Web 開発ツール
SublimeText3 Mac版
神レベルのコード編集ソフト（SublimeText3）
ホットトピック
7467
15
1376
52
77
11
18
19
vue3+vite: src に画像を動的にインポートするために require を使用するときのエラーを解決する方法
May 21, 2023 pm 03:16 PM
vue3+vite:src は、イメージとエラー レポートと解決策を動的にインポートするために require を使用します。vue3+vite は複数のイメージを動的にインポートします。vue3。TypeScript 開発を使用している場合、イメージを導入するために require のエラー メッセージが表示されます。requireisnotdefined は使用できません。 vue2 のような imgUrl:require(' .../assets/test.png') は、typescript が require をサポートしていないため、インポートされます。そのため、import が使用されます。解決方法は次のとおりです: awaitimport を使用します
vue3 プロジェクトで tinymce を使用する方法
May 19, 2023 pm 08:40 PM
tinymce はフル機能のリッチ テキスト エディター プラグインですが、tinymce を vue に導入するのは他の Vue リッチ テキスト プラグインほどスムーズではありません。tinymce 自体は Vue には適しておらず、@tinymce/tinymce-vue を導入する必要があります。外国のリッチテキストプラグインであり、中国語版を通過していないため、公式 Web サイトから翻訳パッケージをダウンロードする必要があります (ファイアウォールをバイパスする必要がある場合があります)。 1. 関連する依存関係をインストールします npminstalltinymce-Snpminstall@tinymce/tinymce-vue-S2. 中国語パッケージをダウンロードします 3. スキンと中国語パッケージを導入します. プロジェクトのパブリック フォルダーに新しい tinymce フォルダーを作成し、
Vue3 がマークダウンを解析し、コードのハイライトを実装する方法
May 20, 2023 pm 04:16 PM
Vue はブログ フロントエンドを実装しており、マークダウン解析を実装する必要があり、コードがある場合はコードのハイライトを実装する必要があります。 Vue には、markdown-it、vue-markdown-loader、marked、vue-markdown など、マークダウン解析ライブラリが多数あります。これらのライブラリはすべて非常に似ています。ここではMarkedが使用され、コード強調表示ライブラリとしてhighlight.jsが使用されます。 1. 依存ライブラリをインストールする vue プロジェクトの下でコマンド ウィンドウを開き、次のコマンド npminstallmarked-save//marked を入力して、マークダウンを htmlnpmins に変換します。
Vue3 でページの部分的なコンテンツを更新する方法
May 26, 2023 pm 05:31 PM
ページの部分的な更新を実現するには、ローカル コンポーネント (dom) の再レンダリングを実装するだけで済みます。 Vue でこの効果を実現する最も簡単な方法は、v-if ディレクティブを使用することです。 Vue2 では、v-if 命令を使用してローカル dom を再レンダリングすることに加えて、新しい空のコンポーネントを作成することもできます。ローカル ページを更新する必要がある場合は、この空のコンポーネント ページにジャンプしてから、再びジャンプします。 beforeRouteEnter ガードを空白のコンポーネントに配置します。元のページ。以下の図に示すように、Vue3.X の更新ボタンをクリックして赤枠内の DOM を再読み込みし、対応する読み込みステータスを表示する方法を示します。 Vue3.X の scriptsetup 構文のコンポーネントのガードには o しかないので、
vue3 プロジェクトをパッケージ化してサーバーに公開した後、アクセス ページが空白で表示される問題の解決方法
May 17, 2023 am 08:19 AM
vue3 プロジェクトがパッケージ化され、サーバーに公開されると、アクセス ページに空白の 1 が表示されます。vue.config.js ファイル内の publicPath は次のように処理されます: const{defineConfig}=require('@vue/cli-service') module.exports=defineConfig({publicPath :process.env.NODE_ENV==='production'?'./':'/&
Vue3 の再利用可能なコンポーネントの使用方法
May 20, 2023 pm 07:25 PM
はじめに vue であれ、react であれ、複数の繰り返しコードに遭遇した場合、ファイルを冗長なコードの束で埋めるのではなく、これらのコードを再利用する方法を考えます。実際、vue と React はどちらもコンポーネントを抽出することで再利用を実現できますが、小さなコードの断片に遭遇し、別のファイルを抽出したくない場合は、それに比べて、React は同じファイル内で対応するウィジェットを宣言して使用できます。または、次のような renderfunction を通じて実装します。 constDemo:FC=({msg})=>{returndemomsgis{msg}}constApp:FC=()=>{return(
Vue3 でアバターを選択してトリミングする方法
May 29, 2023 am 10:22 AM
最終的な効果は、VueCropper コンポーネントのyarnaddvue-cropper@next をインストールすることです。上記のインストール値は Vue3 用です。Vue2 の場合、または他の方法を参照したい場合は、公式 npm アドレス: 公式チュートリアルにアクセスしてください。また、コンポーネント内で参照して使用するのも非常に簡単です。必要なのは、対応するコンポーネントとそのスタイル ファイルを導入することだけです。ここではグローバルに参照しませんが、import{userInfoByRequest}from'../js/api を導入するだけです。 ' コンポーネント ファイルにインポートします。import{VueCropper}from'vue-cropper&
DefineCustomElement を使用して Vue3 でコンポーネントを定義する方法
May 28, 2023 am 11:29 AM
Vue を使用してカスタム要素を構築する WebComponents は、開発者が再利用可能なカスタム要素 (カスタム要素) を作成できるようにする一連の Web ネイティブ API の総称です。カスタム要素の主な利点は、フレームワークがなくても、任意のフレームワークで使用できることです。これらは、異なるフロントエンド テクノロジ スタックを使用している可能性のあるエンド ユーザーをターゲットにする場合、または最終アプリケーションを使用するコンポーネントの実装の詳細から切り離したい場合に最適です。 Vue と WebComponents は補完的なテクノロジであり、Vue はカスタム要素の使用と作成に対する優れたサポートを提供します。カスタム要素を既存の Vue アプリケーションに統合したり、Vue を使用してビルドしたりできます。
