ホームページ  >  記事  >  ウェブフロントエンド  >  vueの核心とは何ですか

vueの核心とは何ですか

青灯夜游
青灯夜游オリジナル
2022-01-11 17:12:1311261ブラウズ

vue には 2 つのコアがあります: 1. データ駆動型、つまりデータの双方向バインディングにより、データの変更に応じてビュー (DOM) のコンテンツも変更できます; 2. コンポーネントベースのシステム利用可能なコードをカプセル化する HTML 要素を拡張できます。

vueの核心とは何ですか

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

#vue.js の 2 つのコア

  • データ駆動型

  • コンポーネント化されたシステム

1. データ駆動型、つまりデータの双方向バインディング

  • Vue の応答性の核心は、ゲッターおよびゲッター中に依存関係が収集されることです。依存関係の更新をトリガーします

  • vue はデータ内のオブジェクトのすべてのプロパティを走査し、Object.defineProperty を使用してこれらすべてのプロパティを

    getter/setter に変換します。

  • これらのゲッター/セッターはユーザーには見えませんが、内部的には Vue が依存関係を追跡し、プロパティ

    がアクセスおよび変更されたときに変更を通知できるようにします。

  • 各コンポーネント インスタンスはウォッチャー インスタンスに対応し、コンポーネントのレンダリング プロセス中に「タッチされた」データ プロパティを依存関係として記録します。

  • ゲッター中に依存関係を収集します。依存関係の収集は、サブスクリプション データ変更ウォッチャーのコレクションです。依存関係の収集の目的は、応答データが変更されたときに対応するサブスクライバーに通知することです。プロセス関連ロジック。

  • #セッターは依存関係の更新をトリガーします。後で、依存関係のセッターがトリガーされると、ウォッチャーに通知され、関連するコンポーネントが再レンダリングされます。

2. コンポーネント システム

コンポーネント化

HTML 要素を展開し、再利用可能なコードをカプセル化します。各コンポーネントは ViewModel に対応します。ページ上のそれぞれの独立したビジュアル/インタラクティブ領域は、コンポーネントとみなすことができます。各コンポーネントはプロジェクト ディレクトリに対応し、コンポーネントに必要なさまざまなリソースがこのディレクトリに保持されます。ページはコンポーネントのコンテナであり、コンポーネントをネストして自由に組み合わせて完全なページを形成できます。

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

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

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

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

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

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

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

[関連する推奨事項:

vue.js チュートリアル]

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

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。