vue.js の 2 つのコアとは何ですか

Vue.js は、UI レベルに焦点を当てた MVVM データの双方向バインディングを提供するライブラリです。中心となるアイデアは: データ駆動型、コンポーネント システムです。

データ駆動型:

Vue.js データ観察原理の技術的実装では、ES5Object.defineProperty とストレージ プロパティ : getter を使用します。および setter (IE9 以降とのみ互換性がある) は、依存関係の収集に基づく監視メカニズムと呼ぶことができます。中心となるのは VM、つまり ViewModel であり、データとビューの一貫性を保証します。

watcher: 各命令には、v-text="msg"、{{ msg }} などの 2 つのウォッチャーであるウォッチャーと呼ばれる、データを観察するために使用される対応するオブジェクトがあります。レンダリングされる関連する DOM 要素。

<div id="app">
  {{ message }}
</div>
var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
})

依存関係コレクションに基づく監視メカニズムの原則:

1 ネイティブ データを「監視可能なオブジェクト」に変換します。通常は、defineProperty を呼び出して、データオブジェクトはメモリ属性です。監視可能なオブジェクトには、値ゲッターまたは値セッターを含めることができます。

2 テンプレートを解析するとき、つまりウォッチャーの評価プロセス中に、評価される各監視可能なオブジェクトは現在のウォッチャーを独自のサブスクライバーとして登録し、現在のウォッチャーの依存関係になります。

3 依存する監視可能なオブジェクトに値が割り当てられると、それ自体にサブスクライブしているすべてのウォッチャーが再評価され、対応する更新、つまりウォッチャー オブジェクトでの関連する DOM 変更のレンダリングがトリガーされることが通知されます。

依存関係コレクションの利点は、スコープ内のすべてのウォッチャーを手動でトリガーしたり評価したりする必要がなく、データの変更を正確かつ積極的に追跡できることです (Angular ダーティ チェック実装の欠点)。特に配列の場合は、配列をラップして配列内の変更を監視する変数メソッド (プッシュなど) を使用する必要があります。属性を追加/削除する場合、または配列内の特定の位置にある要素を変更する場合は、obj.$add(key, value) などの特定の関数を呼び出して更新をトリガーする必要もあります。これは、ES5 の言語機能によって制限されます。

コンポーネント システム:

アプリケーション UI は、完全にコンポーネント ツリーで構成されているとみなすことができます。

コンポーネントの登録:

Vue.component('my-component', {
    // 模板
    template: '<div>{{msg}} {{privateMsg}}</div>',
    // 接受参数
    props: {
        msg: String    
    },
    // 私有数据，需要在函数中返回以避免多个实例共享一个对象
    data: function () {
        return {
            privateMsg: 'component!'
        }
    }
})
<my-component msg="hello"></my-component>

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

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

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

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

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

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

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

Webpack は、オープン ソースのフロントエンド モジュール構築ツールです。さまざまなファイル形式の前処理ロジックを定義するための強力なローダー API を提供します。これは、.vue 接尾辞の単一ファイル コンポーネント フォームの基礎です。したがって、これに基づいて、Youda によって開発された vue-loader を使用すると、テンプレート、スタイル、ロジックの 3 つの要素を同じファイルに統合でき、.vue ファイル拡張子が付いた単一ファイル コンポーネント形式を形成できるため、プロジェクト アーキテクチャが容易になります。と開発の参考にします。

その他の機能:

1 非同期バッチ DOM 更新: 大量のデータが変更されると、影響を受けるすべてのウォッチャーがキューにプッシュされ、各ウォッチャーがキューにプッシュされます。プッシュされるのは 1 回だけです。このキューは、プロセスの次のティックで非同期的に実行されます。このメカニズムにより、同じデータに対する複数の変更によって引き起こされる冗長な DOM 操作を回避でき、また、DOM の読み取りと書き込みの切り替えによって発生する可能性のあるレイアウトを回避するために、すべての DOM 書き込み操作が同時に実行されるようにすることもできます。

2 アニメーション システム: Vue.js は、シンプルかつ強力なアニメーション システムを提供します。要素の表示が変更されると、ユーザーは対応する CSS トランジションまたはアニメーション効果を簡単に定義できるだけでなく、豊富な JavaScript フック関数も使用できます。下位レベルのアニメーション処理用。 3 スケーラビリティ: カスタム ディレクティブ、フィルター、コンポーネントに加えて、Vue.js はユーザーが複数のコンポーネントで共通の機能を再利用できる柔軟なミックスイン メカニズムも提供します。

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