Vue のレスポンシブ原則と双方向データの詳細な分析

応答性を実現するための object.defineProperty の理解

observe/watcher/depが何を指すのかを知る

パブリッシュ・サブスクライブモデルとそれが解決する特定の問題を理解する

一般的に、Javascript でデータ応答性を実装するには、それぞれ vue2.x と vue3.x で使用されるメソッドに対応する 2 つのソリューションがあります。これらは次のとおりです。

オブジェクトプロパティインターセプション (vue2.x) Object.defineProperty
オブジェクトプロキシ (vue3.x)

ヒント：以下はこの記事の主な内容です。以下のケースを参考にしてください。

vue-responsive とは何ですか?

Vue の最もユニークな機能の 1 つは、非侵入的なリアクティブシステムです。データモデルは単なる単純な JavaScript オブジェクトです。変更すると、ビューが更新されます。これにより、状態管理は非常に簡単になりますが、いくつかの一般的な問題を回避できるように、その仕組みを理解することが重要です。このセクションでは、

Vue の応答性システムの低レベルの詳細。

Vue のレスポンシブ性を実装するにはどうすればいいですか?

データの応答性: データモデルは通常の JavaScript オブジェクトに過ぎず、データを変更するとビューが更新されるため、頻繁な DOM 操作が回避され、開発効率が向上します。これは、DOM を頻繁に操作する Jquery とは異なります。

双方向データバインディングを理解する

データが変更されるとビューが変更され、ビューが変更されるとそれに応じてデータが変更されます（この文から、双方向バインディングにはデータの応答性が含まれていることがわかります）

v-modelを使用してフォーム要素に双方向データバインディングを作成できます。

データ駆動はVueの最もユニークな機能の一つです

開発プロセス中は、データがビューにどのようにレンダリングされるかではなく、データ自体にのみ焦点を当てる必要があります。主流の MVVM フレームワークでは、データの応答性と双方向バインディングが実装されているため、データを DOM にバインドできます。

vue.js では、いわゆるデータ駆動型とは、データが変更されるとそれに応じてユーザーインターフェイスも変更され、開発者が DOM を手動で変更する必要がないことを意味します。

データ駆動の理解:

では、Vuejs はどのようにしてこのデータ駆動型のアプローチを実現するのでしょうか?

Vue は、主にデータハイジャックとパブリッシャーサブスクライバーモデルを組み合わせて双方向データバインディングを実装し、Object.defineProperty() を介して各属性のセッターとゲッターをハイジャックし、データが変更されたときにサブスクライバーにメッセージをパブリッシュし、対応する監視コールバックをトリガーします。プレーンな JavaScript オブジェクトをデータオプションとして Vue インスタンスに渡すと、Vue はそのプロパティを反復処理し、Object.defineProperty を使用してそれらをゲッター/セッターに変換します。ゲッター/セッターはユーザーには表示されませんが、内部的には Vue が依存関係を追跡し、プロパティがアクセスされて変更されたときに変更を通知できるようにします。

Vueの双方向データバインディング

MVVM をデータバインディングのエントリポイントとして使用し、Observer、Compile、Watcher を統合し、Observer を使用して独自のモデルのデータ変更を監視し、Compile を使用してコンパイルテンプレート命令 (Vue の {{}} を解析するために使用される) を解析し、最後に Watcher を使用してオブザーバーと Compile の間に通信ブリッジを構築し、データ変更 -> ビューの更新、ビューのインタラクション変更 (入力) -> データモデルの変更という双方向のバインディング効果を実現します。

vue-双方向データの分析? /v-model 双方向データバインディングの原理

コードは次のとおりです（例）：

  <スクリプト>
    // オブジェクトの大文字と小文字の値の書き込み let data = {
      名前: '李白'、
      年齢: 18
    }

    Object.keys(data).forEach(キー => {
      defineReactiveProperty(データ、キー、データ[キー])
    })

    関数defineReactiveProperty(データ、キー、値) {
      Object.defineProperty(データ、キー、{
        // 得る（） {
          戻り値
        },
        // 値を設定する set(newVaue) {
          if (newVaue === 値) {
            戻る
          }
          値 = 新しい値
          コンパイル()
        }
      })
    }
    コンパイル()
  </スクリプト>
</本文>

</html>

 
 関数コンパイル（）{
  // document.querySelect('#app').childNodes を通じて app の下にあるすべての子要素を取得します。const nodes = document.querySelector('#app').childNodes
  // この値を出力します。現在の値はネストされた配列です。foreachを使用します 
  // コンソール.log(ノード)

  ノード.forEach(アイテム => {
    // 出力項目を再度 html:49 <input type="text" v-model="name"> は入力ボックスです // console.log(item)
    // 現在のラベルを除外します。ノードの出力ではスペースを 'text' nodeType 3 として使用し、ラベル nodetype は 1 であるため、ラベルであると判断されます。if (item.nodeType === 1) {
     定数 attrs = アイテム.属性
      // console.log(attrs) {0: type, 1: v-model, type: type, v-model: v-model, length: 2} は配列を返します Array.from(attrs).forEach(arr => {
        // console.log(arr) // texgt= 'text' v-mode: 'name' 、この v-model を除外します
        (arr.nodeName === 'v-model')の場合{
            アイテム値 = データ[arr.nodeValue]
            アイテム.addEventListener('input',e => {
              console.log(e.target.value)
              //  
              データ[arr.nodeValue] = e.target.value
            })
        }
      })
   }
  })
}

要約する

データ応答性の実装は、オブジェクトプロパティのインターセプションに他なりません。これを実装するには Object.defineProperty を使用し、最適化のために vue3 の Proxy オブジェクトプロキシソリューションを使用します。
面接ガイドに記載されているいくつかの専門用語
観察オブジェクトは、データを応答オブジェクトに処理するオブジェクトです。
ウォッチャーは実際にはデータ変更後の更新機能を指します (Vue には 2 種類のウォッチャーがあり、1 つはビューの更新に使用されるウォッチャーで、もう 1 つはウォッチ構成項目を通じて宣言されるウォッチャーです)
depは、パブリッシュとサブスクライブを使用して実装された更新関数を収集し、更新関数をトリガーするオブジェクトを指します。
命令実装の核となるのは、テンプレートのコンパイルを通じて識別子を見つけ、それにデータをバインドし、データの変更後にそれを再度配置することだけです。
パブリッシュ/サブスクライブモデルの本質は、1 対多の問題を解決し、Vue でデータが変更された後に正確な更新を実装することです。

Vue のレスポンシブ原則と双方向データに関するこの記事はこれで終わりです。Vue のレスポンシブ原則と双方向データに関するより関連性の高いコンテンツについては、123WORDPRESS.COM で以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません: