[vue3] vue3 と vue2 の違い:

---

Vue3 フレームワークの利点と特徴:

1. 最初のレンダリングの高速化
2. diff アルゴリズムの方が高速です
3. メモリ使用量が少ない
4. パッケージサイズの小型化
5. Typescript サポートの向上
6. 合成 API 合成 API

1. ライフサイクル:

ライフサイクルに関しては、ほとんどのライフサイクルフック名と「on」の機能が似ていることを除いて、全体的に大きな変更はありません。ただし、注意すべき点は、以下に示すように、でライフサイクル フックを使用する必要がありVue3、でライフサイクル フックを使用できることです。组合式API（Composition API）先引入 Vue2选项API（Options API）直接调用

ビュー2	ビュー3	説明する
作成前	設定	コンポーネントを作成する前に、初期化タスクを実行します。
作成した	設定	コンポーネント作成後、データにアクセスしてインターフェースデータを取得します。
前マウントン	マウント前	コンポーネントを取り付ける前
取り付けられた	マウント済み	コンポーネントのマウントが完了し、DOM が作成されました。データまたは DOM 要素にアクセスし、サブコンポーネントにアクセスします。
更新前	onBeforeUpdate	更新されていません。更新前にすべてのステータスを取得します
更新しました	更新済み	コンポーネントのマウントが完了し、DOM が作成されました。データまたは DOM 要素にアクセスし、サブコンポーネントにアクセスします。
前に破壊する	onBeforeUnmount	更新されていません。更新前にすべてのステータスを取得します
破壊されました	アンマウント済み	コンポーネントが破壊された後

ヒント: セットアップは beforeCreate および created ライフサイクル フックを中心に実行されるため、明示的に定義する必要はありません。

2. 構成API

[1] Vue2 はオプション API (オプション API) であり、ロジックがファイルのさまざまな場所 (データ、プロップ、計算、監視、ライフサイクル フックなど) に散在するため、コードの可読性が低下します。特定のロジックを変更する必要がある場合は、ファイルの場所までジャンプする必要があります。
[2] Vue3 を組み合わせた API (Composition API) はこの問題をうまく解決し、同じロジックの内容をまとめて記述することができるため、コードの可読性と一貫性が向上し、より完璧なロジックが提供されます。すべてのロジックは setup 関数内にあり、ref、watch、その他の関数を使用してコードを整理します。

３、セットアップ機能

setup 関数は、結合された API のエントリ関数です。デフォルトでは、構成オプションがエクスポートされ、setup 関数が宣言され、テンプレートを返すにはデータと関数が必要です。
setup 関数は、結合された API としての Vue3 の独自のオプションです。起点
コンポーネントのライフサイクルの観点から見ると、それは関数のコンポーネント インスタンス beforeCreate 之前执行
ではなく、未定義の場合はセットアップで返す必要があります。将来的には、 Vue3 プロジェクトのほぼすべてがこの関数を通じて取得されるようになります。this
数据或者函数在模板中使用
用不到 this

4. 応答性の原則

1. 原則

[1] Vue2 の応答性の原則は、es5的 Object.defineProperty()ハイジャックとデータの組み合わせを使用して发布订阅模式達成すること
です [2] Vue3 の応答性の原則は、es6的 proxy データ プロキシを使用して、 reactive() 関数を通じて各オブジェクトのプロキシ層をラップすることですproxy 监听属性的变化。

2. Object.definePropertyの欠陥

[1] オブジェクトの属性を追加および削除するための応答スタイルはなく、配列内の要素を追加および削除するための応答スタイルもありません。添字を使用して要素を変更するための応答スタイルもありません。また、要素の長さを変更するための応答スタイルもありません。 .length を介した配列。
[2] インスタンス作成時に作成されたデータインスタンス内のデータのみがレスポンシブになり、作成したVueインスタンスのデータオブジェクトに属性を追加すると、データは更新されますが、ビューは更新されずレスポンシブになりません。

3. プロキシのメリット

[1] プロキシのパフォーマンスは一般的に Object.defineProperty よりも優れています
[2] vue3 はより多くのデータ型のハイジャックをサポートします (vue2 は Object、Array のみをサポートします。vue3 は Object、Array、Map、WeakMap、Set、WeakSet をサポートします) [3] vue3 はその他のデータ型をサポートし
ます依存関係を収集して通知をトリガーする機会 (vue2 は取得時に依存関係のみを収集し、vue3 は取得/取得/反復時に依存関係を収集します。vue2 は設定時にのみ通知をトリガーし、vue3 はトリガー通知の設定/追加/削除/クリア時にのみ通知をトリガーします)。 vue2 のレスポンシブな欠陥は vue3 で実装できます
[4] vue3 は「正確なデータ」データ ハイジャックを実現しました (vue2 はデータ全体を再帰的にハイジャックし、vue3 は特定のオブジェクトが使用されるときにのみ使用します)。
[5] Vue3 の依存関係コレクターは保守が容易です (vue3 はネイティブ配列を監視および操作します。vue2 は書き換えメソッドを通じて配列を監視します)

五、リアクティブ関数とリファレンス関数

1. リアクティブ関数 = "通常は、複雑なタイプの応答データを使用します

使用手順:
1. vue から reactive 関数をインポートします。
2. setup 関数で、reactive 関数を使用して共通オブジェクトを渡し、応答データ オブジェクトを返します。
3. 最後に、setup 関数は応答オブジェクトを含むオブジェクトを返します。 、テンプレートで使用できます

2. ref function = "応答性の高いデータ、無制限のタイプの定義に使用します

手順を使用します。
1. vue から ref 関数をインポートします。
2. setup 関数で、ref 関数を使用して共通データ (単純または複雑) を渡し、応答データを返します。 3. 最後に、setup 関数は応答データを
含むオブジェクトを返します。 data
注意：refで作成したデータが、.valueはjsでは必須、templateでは省略可能

3. 選び方

[1] reactive はオブジェクトを応答性の高いデータ オブジェクトに変換できますが、単純なデータ型はサポートしません。
[2] ref は単純なデータ型を応答性の高いデータ オブジェクトに変換でき、複雑なデータ型もサポートしますが、操作には .value が必要です。
[3] それぞれに特徴があり、ベストプラクティスや明確な境界線はなく、誰もが自由に選択できます。
[4] データがオブジェクトであると判断でき、フィールド名も決定できる場合は、reactive を使用してレスポンシブ データに変換し、それ以外はすべて ref を使用できます。
[5] レスポンシブ データを定義するための関数の選択では、すべてのシナリオをサポートするために ref 関数を使用し、.value を保存するフィールド オブジェクトを決定するために reactive を使用してみてください。

6、フック

1 はじめに

1. フック: 直訳 [hʊk] フック
2. フロントエンド分野ではフックは明確に定義されていませんが、Zhihu の定義を借用すると、JS ではコールバック、イベント駆動型であり、いくつかの再利用可能なメソッドを統合して定義します。
3. カスタム フックの公式定義: Vue アプリケーションの概念では、「コンポーザブル」は Vue の複合 API を使用してステートフル ロジックをカプセル化して再利用する機能です。

2. Vue3 カスタムフック

一部の再利用可能なメソッドはフックのようにハングしており、高い凝集性と低い結合性という目標を達成するためにいつでも導入して呼び出すことができます。

3. フックの役割

いくつかの再利用可能なメソッドを関数の形式で抽出し、フックのように吊るします。これはいつでも導入して呼び出すことができ、高い凝集性と低い結合性という目標を達成します。

1. 再利用可能な関数を外部 JS ファイルに抽出する
2. 関数名/ファイル名は use で始まります (例: useXX)
3. 参照する場合は、次のように明示的に分解された応答性の変数またはメソッドを公開します。 const {nameRef, Fn} = useXX() (setup 関数内のカスタム フックの変数とメソッドを分解します)

4. Vue3カスタムフックとVue2時代のMixinの関係

[1] Mixin/クラスの制限事項

従来の VUE2 オプション API では、ロジック多重化は主に Mixin または Class 継承によって実現されていましたが、この方法には明らかな欠点が 3 つあります。

1. データソースが不明確: 複数のミックスイン/クラスが使用されている場合、どのデータがどのモジュールから提供されているかを追跡することが困難になり、メンテナンスの難易度が高くなります。
2. 名前空間の競合: 複数のクラス/ミックスインの開発者が同じ属性名を登録し、競合が発生する可能性があります。
3. 暗黙的なモジュール間通信: 異なるミックスイン/クラス間に何らかの相互作用が存在する可能性がありますが、その結果は不明です。

【2】フックのメリット

実際、Mixin/Class の欠点は、Hook の利点にもなります。

1. 一目でわかりやすさの源: フックはクラスではなく、オブジェクトに状態やメソッドを格納し、オブジェクトをエクスポートすることで再利用を実現するため、オブジェクト間の過剰な結合や干渉などの問題は発生しません。フックのさまざまな状態は内部でカプセル化され、外界から隔離され、関数と変数の一部のみが公開されるため、ソースと関数が明確に識別可能になり、妨害される可能性が低くなります。
2. 名前の競合の問題はありません。フックは本質的にクロージャ関数であり、内部的にエクスポートされた変数とメソッドは名前の変更をサポートしているため、競合することなく同じコンポーネント内で同じフックを N 回使用できます。
3. ロジックの簡素化: フックの開発後は、フックを使用するときに内部ロジックを気にする必要はありません。フックの効果と使用方法だけを知る必要があります。他のコア ビジネス ロジックに集中すると、大幅に節約できます。反復的なコードの

5. フックの各種仕様

1. 以use开头useTimeOut などのHook の命名は規則であり、開発者は useXXX を見たときにこれが Hook であることを理解できます。>2. フックは名称透明である必要があります表明其功能。
2. フックは現在のフォーカスの最上位スコープでのみ使用されますが、不要在嵌套函数、循环中调用Hook
3. 関数は次のとおりである必要があります纯函数，没有副作用
4. 戻り値は函数或数据，供外部使用
5. 他のフックはフック内で使用できます。组合功能
6. データは依赖于输入、外部状態に関係なく、データ フローを明確に保つ必要があります。
7. Hook では内部处理错误、エラーを外部にスローしないでください。そうしないと、フックの使用コストが増加します。
8. フック はい单一功能、フック用にあまりにも多くの関数を設計しないでください。

6. 独自のカスタムフックを作成する方法

カスタム フックを設計する前に、少なくとも次の点を理解する必要があります。

1. 求める機能や得たい効果を明確にする
2. フックの命名規則およびその他の考慮事項に準拠する
3. 可能な限り最高のパフォーマンスと合理化されたコード
4. TypeScript を使用する