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 にアップグレードする
最近、「フロントエンドキャッシュ」という新しい要件が作成されました要件背景: フォームへの高頻度の繰...
Macはシェル(ターミナル)SSHを使用してリモートサーバーに接続します前提条件: 接続する必要があ...
1. ウェブサイトのホームページのハイパーテキスト ドキュメントの構成構造は、ユーザーの注意をできる...
多くの場合、大規模および中規模の Web サイトでは、静的リソース (フォント ファイル、画像など)...
1.Mysqlスクリプトのワンクリックインストール [root@uat01 ~]# cat Inst...
目次非同期を理解するフェッチ(url)レスポンス.json() asyncとawaitを組み合わせる...
ソフトウェアのダウンロードソフトウェアのダウンロード リンク: https://pan.baidu....
序文ご存知のとおり、「CSS で要素を垂直方向に中央揃えするにはどうすればよいか」という質問は、すで...
最近私が学んでいるのは MySQL の知識なので、MySQL をインストールすることが非常に重要です...
1. テスト環境名前バージョンセント7.6ドッカー18.09.06 2. オンラインインストールここ...
はじめに: すべてのデータを 1 つのテーブルに保存することのデメリット表の構成構造は複雑で不明瞭で...
1. リストリスト ulコンテナーには、一貫した構造とスタイルを持つテキストまたはグラフの形式が読...
この記事では、虫眼鏡効果を実現するためのJavaScriptの具体的なコードを参考までに紹介します。...
準備する1. 必要なインストールパッケージをダウンロードするhttps://www.php.net/...
1. フォワードプロキシとリバースプロキシの違いフォワード プロキシはクライアントのプロキシとして機...