vuejs の 2 つのコアとは何ですか

vuejs の 2 つのコアは、データ駆動型システムとコンポーネント システムです。データドリブンはデータの双方向バインディングであり、データとビューの一貫性を確保するために使用されます。コンポーネント システムは、ページを複数の比較的独立したモジュールに抽象化することができ、コードの再利用を実現し、開発効率とコード品質を向上させ、コードのメンテナンスを容易にすることができます。

このチュートリアルの動作環境: Windows7 システム、vue2.9.6 バージョン、DELL G3 コンピューター。

vue.js の 2 つのコア: 1. データ駆動型------------- 2. コンポーネント システム

1.データ ドライバー、つまりデータの双方向バインディング

データが変更された後、ページは再レンダリングされます。これが Vue の応答性です。では、これはどのように行われるのでしょうか?

このプロセスを完了するには、次のことを行う必要があります:

• データの変更を検出する
• ビューが依存するデータを収集する
• データが変更されたとき, 更新が必要なビュー部分を自動的に「通知」して更新します

#対応する専門家の言葉は次のとおりです:

#データハイジャック/データエージェント

• 依存関係の収集
• パブリッシュおよびサブスクライブ モード
• 言い換えると、Vue の応答性の核心は、ゲッター中に依存関係が収集され、セッター中に依存関係の更新がトリガーされることです。

#vue は、データ内のオブジェクトの

すべてのプロパティ

を走査し、

Object.defineProperty を使用してこれらすべてのプロパティを ゲッター/セッター#。 これらのゲッター/セッターはユーザーには見えませんが、内部的には Vue が依存関係を追跡できるようにし 、プロパティがアクセスされ変更されたときに変更を通知します 。

各コンポーネント インスタンスはウォッチャー インスタンスに対応し、コンポーネントのレンダリング プロセス中に「タッチされた」データ プロパティを依存関係として記録します。 ゲッター中に依存関係を収集します。依存関係の収集は、サブスクリプション データ変更ウォッチャーのコレクションです。依存関係の収集の目的は、応答データが変更された場合に、対応するサブスクライバーに通知できるようにすることです。プロセス関連のロジック。

setter は依存関係の更新をトリガーします。後で、依存関係の

setter がトリガーされると

、 はウォッチャー 、

に通知し、関連するコンポーネントが更新されます。 -レンダリング。

。 概要: 1) 原則:

Vue インスタンスを作成するとき、vue はデータ オプションのプロパティを走査し、Object.defineProperty を使用します。ゲッターとセッターを追加してデータ読み取りをハイジャックし (ゲッターは依存関係の収集に使用され、セッターは更新のディスパッチに使用されます)、依存関係を内部的に追跡して、プロパティがアクセスおよび変更されたときに変更を通知します。 各コンポーネント インスタンスには、対応するウォッチャー インスタンスがあり、コンポーネントのレンダリング プロセス中に依存関係のすべてのデータ属性 (依存関係コレクション、計算されたウォッチャー インスタンスおよびユーザー ウォッチャー インスタンス) が記録され、依存関係は次のようになります。変更時期が来ると、セッター メソッドは、このデータに依存するウォッチャー インスタンスに再計算 (更新のディスパッチ)

を通知し、それによって関連するコンポーネントを再レンダリングします。

2) 実装プロセス:

データの双方向バインディングを実装するには、まずデータをハイジャックして監視する必要があることはすでにわかっています。そのため、すべてを監視するオブザーバーをセットアップする必要があります。プロパティ。属性が変更された場合は、更新する必要があるかどうかをサブスクライバー Watcher に通知する必要があります。

サブスクライバーが多数あるため、これらのサブスクライバーを特別に収集し、リスナー オブザーバーとサブスクライバー ウォッチャーの間でそれらを均一に管理するメッセージ サブスクライバー Dep が必要です。次に、各ノード要素をスキャンして解析する命令パーサー Compile も必要です。

これに応じて、関連する命令をサブスクライバ Watcher に初期化し、テンプレート データを置き換えるか、対応する関数をバインドします。サブスクライバ Watcher は、対応する属性の変更を受け取ると、対応する更新関数を実行してビューを更新します。したがって、次に、データの双方向バインディングを実現するために次の 3 つの手順を実行します:

1. リスナー オブザーバーを実装して、すべてのプロパティをハイジャックして監視し、変更がある場合はサブスクライバーに通知します。

2. プロパティ変更通知を受信し、対応する関数を実行してビューを更新できるサブスクライバー ウォッチャーを実装します。

3. 各ノードの関連命令をスキャンして解析し、テンプレート データを初期化し、対応するサブスクライバーを初期化できるパーサー Compile を実装します。

注: Proxy は JavaScript 2015 の新機能です。 Proxy のプロキシは、オブジェクトの特定のプロパティではなく、オブジェクト全体を対象としています。そのため、オブジェクトの各プロパティを横断する必要がある Object.defineProperty とは異なります。オブジェクト,Proxy 同じレベル構造の下ですべての属性の変更を監視するには、プロキシの 1 つの層だけが必要です。もちろん、深い構造の場合は、再帰を実行する必要があります。さらに、Proxy はプロキシ配列の変更をサポートします。 Proxy は vue3.0

2 で使用されるメソッドです。コンポーネント システム

理解:

1) ページを複数の比較的独立したモジュールに抽象化できる;

2) コードの再利用を実装し、開発効率とコード品質を向上させ、コードのメンテナンスを容易にする

コンポーネントコア オプション

1 テンプレート: テンプレートは、データと最終的にユーザーに表示される DOM 間のマッピング関係を宣言します。

2 初期データ (data): コンポーネントの初期データ状態。再利用可能なコンポーネントの場合、これは通常プライベート状態です。

3 受け入れられる外部パラメータ (小道具): データはパラメータを通じてコン​​ポーネント間で転送および共有されます。

4 メソッド: データ変更操作は通常、コンポーネントのメソッド内で実行されます。

5 ライフサイクル フック: コンポーネントは複数のライフサイクル フック関数をトリガーします。最新バージョン 2.0 では、ライフサイクル関数の名前が大幅に変更されました。

6 プライベート リソース (アセット): Vue.js では、ユーザー定義の命令、フィルター、コンポーネントなどを総称してリソースと呼びます。コンポーネントは独自のプライベート リソースを宣言できます。プライベート リソースは、コンポーネントとそのサブコンポーネントによってのみ呼び出すことができます。

関連する推奨事項: 「vue.js チュートリアル 」

以上がvuejs の 2 つのコアとは何ですかの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。