序文以前、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 のデータ型とストレージメカニズムの包括的な説明
この記事では、ネイティブ JS で実装された均一なモーションを紹介します。その効果は次のとおりです。...
特定のインターフェースをリクエストするときに、指定されたテキスト文字列または JSON 文字列を返す...
トイ・ストーリー3 オンラインマーケティングウェブサイトゼンモバイル鉄から鉄へスプラウトファンドバー...
現象:イメージを実行します (例: ubuntu14.04)。 docker run -it --r...
序文同社の開発者は、データの更新時に replace into ステートメントを使用していました。不...
ページコンテンツ全体を中央に配置する方法と、コンテンツに合わせて高さを自動的に拡大縮小する方法。これ...
1.これは1. 誰が誰に電話をかけますか?例: 関数foo(){ console.log(&quo...
mysql のような php switch case ステートメント。 xxフィールドを選択、ケース...
目次1. ピニアとは何ですか? 2. Piniaは使いやすい3. ユーザーエクスペリエンス1. ピニ...
<br />原文: http://andymao.com/andy/post/80.ht...
目次js 呼び出しメソッドアンドロイド1.jsはネイティブを呼び出す2. ネイティブコールjs iO...
1. Dockerfile 内の ENV 命令は、イメージの環境変数を定義するために使用されます。次...
<br /> 特定の Web サイトを閲覧して、優れた Web ページを見つけた場合、そ...
目次序文1. MySQLをアンインストールする2. MySQLをインストールする要約する序文学習中に...
タブ切り替えもプロジェクトではよく使われる技術です。一般的にタブ切り替えはjsやjqを使って実装され...