1. なぜ vue3 が必要なのでしょうか?vue2 を使用すると、次のような不快な経験に遭遇することがよくあります。
vue3 の登場は vue2 の欠点を解決するためです。そのコンポジション API はロジックの再利用の問題を非常にうまく解決します。さらに、vue3 のソース コードは ts で記述されており、ts を非常にうまくサポートしています。プロジェクト開発中に ts を使用すると、コードをより堅牢にすることができます。 2. vue3の利点
3. 応答原則の違いVue2.x は、特定のキーに基づいてデータを読み取り、変更する es5 の Object.defineProperty を通じて双方向データ バインディングの原則を実装します。 setter メソッドはデータハイジャックを実装するために使用され、getter メソッドはデータを変更するために使用されます。ただし、まずインターセプトして変更するキーを知っておく必要があるため、vue2 は、属性の追加と削除、配列のインデックスと長さの変更を監視できないなど、新しく追加された属性に対して何もできません。vue2 の解決策は、Vue.set(object, propertyName, value) などのメソッドを使用して、ネストされたオブジェクトに応答性を追加することです。 Vue3.x は、Object.defineProperty の代わりに、ES2015 のより高速なネイティブ プロキシを使用します。プロキシは、オブジェクトの前に「インターセプション」レイヤーを設定するものと理解できます。オブジェクトへの外部アクセスは、まずこのインターセプション レイヤーを通過する必要があります。したがって、プロキシは外部アクセスをフィルターして書き換えるメカニズムを提供します。プロキシはプロパティではなくオブジェクトを直接監視し、新しいオブジェクトを返すことができ、応答性が向上します。 4. ライフサイクルの違いbeforeCreate -> setup() を使用してください 作成された -> setup() を使用する マウント前 -> マウント前 マウント済み -> onMounted 更新前 -> 更新前 更新済み -> onUpdated beforeDestroy -> onBeforeUnmount 破棄 -> onUnmounted エラーキャプチャー -> エラーキャプチャー ページ内でライフサイクル機能を利用したい場合、vue2 のこれまでの操作ではページ内にライフサイクルを直接記述し、vue3 を参照する必要がありましたが、これが 3 がコードをより低いレベルに圧縮できる理由です。 5. デフォルトのプロジェクトディレクトリ構造の違いVue3 は、構成ファイル ディレクトリ、config および build フォルダーを削除し、static フォルダーを削除し、public フォルダーを追加し、index.html を public に移動します。views フォルダーが src フォルダーに追加され、ビュー コンポーネントとパブリック コンポーネントを分類します。 6.vue3はグローバルAPIを最適化しますVue3 では、グローバル API と内部 API の両方がツリーシェイキングのサポートを考慮してリファクタリングされています。その結果、グローバル API は、ES モジュール ビルドからの名前付きエクスポートとしてのみアクセスできるようになりました。 'vue' から { nextTick } をインポートします 次のティック(() => { // DOM 関連のいくつかのもの}) エントリーファイル // Vue2 の書き込み // vue2 のグローバル構成を変更すると、Vue オブジェクトのプロパティが変更されます // 異なるアプリで異なる構成の Vue オブジェクトを共有することも非常に困難です import Vue from 'vue' './App.vue' からアプリをインポートします。 Vue.config.xx=xx Vue.use(...) Vue.mixin(...) 新しいVue({ レンダリング:h=>h(アプリ) }).$mount('#app') // Vue3 を 'vue' からインポートします './App.vue' からアプリをインポートします。 const app = createApp(APP) // アプリインスタンスを作成する app.config.xx=xx // 競合することなくインスタンスの構成を変更する app.use(...) app.mixin(...) app.mount('#app') 7. definePropertyの代わりにProxyを使用するdefineProperty に対する Proxy の利点 Object.defineProperty() には主に 3 つの問題があります。
プロキシは ES2015 仕様で正式に追加されました。次の機能があります。
上記の 2 つの点に加えて、Proxy には次の利点もあります。
8. 詳細情報vue3 ソースコード 上記は、Vue2 と比較した Vue3 の利点の詳細な要約です。Vue2 と比較した Vue3 の利点の詳細については、123WORDPRESS.COM の他の関連記事に注目してください。 以下もご興味があるかもしれません:
|
<<: MySQL で重複しない携帯電話番号テーブルをバッチ生成する方法のサンプルコード
>>: Windows Server 2008R2 ファイル サーバーを Windows Server 2016 にアップグレードする
かつて、サイコロを振るゲームについて話しました。その時は、steps 属性 + スプライト画像を使用...
MySQL UTF-8 エンコーディングMySQL は 2003 年のバージョン 4.1 から U...
目次[例を見る]: 【本来の効果は以下の通り】理由は次のとおりです。 【解決】:要約するBootSt...
以前、単純な UDP サーバーとクライアントの例を書きましたが、その中で、自分自身をクライアントと見...
目次ルーティングマネージャー背景はじめる問題を解決する方法要約するルーティングマネージャー各ジャンプ...
背景画像でも、ページ上のテキストサイズでも、1 ピクセルの違いは非常に明白です。そして、私は学生時代...
この記事では、配列を走査する 4 つの方法を比較してまとめます。 for ループ: for (let...
序文ページの HTML 構造にネストされたボックスが多数含まれている場合、ページに複数の垂直スクロー...
目次1. Linuxシステムの操作レベルの概要2. 実行レベルを確認する3. 現在のシステムの動作レ...
Optgroup は、ドロップダウン リストのコンテンツをより整理するために、select タグで使...
easyui フレームワークのコードは次のとおりです。 css: .ファイルボックス{ フロート:...
IE6 は PNG の透明度をサポートしていないと多くの人が言っています。実際、IE は 100%...
スプレッド演算子を使用すると、式をある時点で展開できます。スプレッド演算子は、複数のパラメーター (...
ハッシュモード(デフォルト)動作原理:ウェブページのハッシュ値の変化を監視する—> onhas...
この記事では、3Dカルーセル効果をjsで実装するための具体的なコードを参考までに共有します。具体的な...