序文以前、Vue におけるレスポンシブ データの原則について学びました (そして、Vue のレスポンシブ原則についてメモを取りました)。実際には、Object.defineProperty を通じてゲッターとセッターを制御し、オブザーバー モードを使用するレスポンシブ デザインです。次に、配列には一連の操作メソッドがありますが、配列のゲッター メソッドとセッター メソッドはトリガーされません。では、配列のレスポンシブ デザインは Vue でどのように実装されるのでしょうか? 一緒に学んでみましょう。 ソースコードhttps://github.com/vuejs/vue/blob/dev/src/core/observer/array.js 学習の第一歩はどこから始めればよいでしょうか?うーん... Vue レスポンシブ原則 Vue における双方向バインディングの原理と実装 さて、まずはこれを見てみましょう。ハハハ! 写真から始めましょう下の図を見て、まずは Vue での実装の考え方を理解しましょう。そうすれば、後でソースコードの実装を見たときに、明確で理解しやすいものになります。 この絵を見て考えてみてください。大体理解できましたか? まずブラウザが__proto__ポインタをサポートしているかどうかを確認します 配列のこれらの 7 つのメソッドを書き換え、__proto__ がサポートされているかどうかに応じて、書き換えた配列を配列のプロトタイプにポイントします。 簡単じゃないですか! ! ! ソースコードを見る実装の原理がわかったところで、ソースコードを見てみましょう。ソースコードを見る主な目的は、作者がどのように実装したかをより深く理解することです。また、優れたコードエンコード方法を見て、そこから学ぶこともできます。 下のコードブロックにいくつか説明を書いておきました。 //https://github.com/vuejs/vue/blob/dev/src/core/observer/array.js //def メソッドは、Object.defineProperty カプセル化に基づくメソッドのレイヤーです。非常にシンプルです。探す手間を省くために、以下のコードを投稿します。 '../util/index' から { def } をインポートします //ネイティブ配列プロトタイプオブジェクトを保存します。const arrayProto = Array.prototype // プロトタイプ接続を作成し、arrayMethods のプロトタイプを Array.prototype にポイントします エクスポート const arrayMethods = Object.create(arrayProto) const メソッドToPatch = [ '押す'、 'ポップ'、 'シフト'、 'シフト解除'、 'スプライス'、 '選別'、 '逆行する' ] methodsToPatch.forEach(関数 (メソッド) { // ネイティブメソッドをキャッシュ const original = arrayProto[method] def(arrayMethods, メソッド, 関数ミューテーター (...args) { var args = [], len = 引数の長さ; while (len--) args[len] = arguments[len]; const result = original.apply(this, args) // 元の配列メソッドの実行結果 const ob = this.__ob__ // この __ob__ は Observe のインスタンスです~~~~ 挿入させる スイッチ(メソッド){ ケース 'プッシュ': ケース 'unshift': 挿入された = 引数 壊す ケース 'スプライス': 挿入 = args.slice(2) 壊す } if (inserted) ob.observeArray(inserted) // 配列が変更された場合は、再度observeArrayを呼び出します // 変更を通知する ob.dep.notify() // 結果を返す }) }) これは Observer のコードです: var Observer = 関数 Observer(値) { this.value = 値; this.dep = 新しい Dep(); this.vmCount = 0; def(value, '__ob__', this); //ここで、Observeインスタンスが各オブジェクトデータにバインドされていることがわかります。したがって、上記のコードのthis.__ob__はこれです。if (Array.isArray(value)) { //ここで、データが配列型であるかどうかを判断します。そうであれば、observeArrayが使用されます。 (hasProto) の場合 { protoAugment(値、配列メソッド); } それ以外 { copyAugment(値、配列メソッド、配列キー); } this.observeArray(value); //ここでは配列型のデータを次のように処理します} else { this.walk(値); } }; 以下は observeArray の実装です。 Observer.prototype.observeArray = 関数 observeArray(items) { (var i = 0, l = items.length; i < l; i++) の場合 { observe(items[i]); // observeメソッドは以下のとおりです} }; ここでは、observe メソッドを見てみましょう。 関数 observe(値、asRootData) { if (!isObject(value) || value instanceof VNode) { 戻る } var ob; if (hasOwn(value, '__ob__') && value.__ob__ instanceof Observer) { ob = 値.__ob__; } それ以外の場合 ( 観察すべき && !isServerRendering() && (Array.isArray(値) || isPlainObject(値)) && Object.isExtensible(値) && !値._isVue ){ ob = 新しいオブザーバー(値); } if (asRootData && ob) { ob.vmCount++; } 戻り値 } これは def メソッドの実装に関するものです。非常に単純なので説明は省略します。 関数def (obj, キー, val, 列挙可能) { Object.defineProperty(obj, キー, { 値: val、 列挙可能: !!列挙可能、 書き込み可能: true、 設定可能: true }); } 上記は、Vue で配列の変更を監視する方法についての詳細です。Vue が配列を監視する方法の詳細については、123WORDPRESS.COM の他の関連記事に注目してください。 以下もご興味があるかもしれません:
|
<<: jsvc を使用して tomcat を起動する方法 (通常のユーザーとして実行)
>>: (MariaDB) MySQL のデータ型とストレージメカニズムの包括的な説明
大量のデータを扱うシステムの中には、クエリ効率の低さやデータの保存時間の長さといったデータベースの問...
1. 兄弟要素の余白を結合する効果は次のようになります: (2 つの間の間隔は 150 ピクセルでは...
1. まず、TomcatログのエンコーディングとIdeaログ表示コンソールのエンコーディングを区別す...
Docker の作成Compose の紹介Compose は、マルチコンテナ Docker アプリケ...
123WORDPRESS.COM HTML チュートリアル セクションに戻るには、ここをクリックして...
序文現在、プロジェクトでは、Axios ライブラリが HTTP インターフェース リクエストによく使...
この記事では、MySQL 8.0.12のインストールチュートリアルを参考までに紹介します。具体的な内...
目次1. SC テーブルを挿入または変更するときに、テスト スコアが 0 ~ 100 の範囲外の場合...
Nginx では、URL のパス パラメータに基づいて、到達不可能なアップストリームに動的に転送する...
vmware vSphere 6.5 は vSphere ソフトウェアのクラシック バージョンであ...
目次1. マージインターフェース1.1 非関数メンバー1.2 関数メンバー序文:今日お話ししたいのは...
序文div またはモジュールに overflow: scroll 属性を使用すると、iOS フォンで...
システム提供のMySQLをアンインストールする1. MySQLがシステムにインストールされているかど...
目次JavaScript 関数呼び出しの典型的な例JS関数の定義と呼び出し方法要約するJavaScr...
1. getBoundingClientRect() 分析getBoundingClientRect...