この記事は主に、Vue のレスポンシブ ソース コードを理解していない、または触れたことがない人向けです。主な目的は、Vue のレスポンシブ原則の基本を理解することです。面接でこのような質問をされた場合、面接官があなたに何と答えてほしいかわかりますか?追記:記事に間違いがありましたら、ご訂正いただければ幸いです。 応答的な理解応答性とは、その名前が示すように、データが変更されるとビューが更新されることを意味します。この記事では主に、Vue2.0 におけるオブジェクトと配列の応答性の実装を分析します。依存関係の収集とビューの更新については次の記事に譲ります。 Vue では、レスポンシブ データとは、一般的に配列型とオブジェクト型のデータを指します。 Vue は Object.defineProperty メソッドを通じてオブジェクトのプロパティを内部的にハイジャックし、配列は配列メソッドをオーバーライドすることによって実装されます。以下に簡単に実装してみましょう。 まず、傍受する必要があるデータを定義します。 定数vm = 新しいVue({ データ () { 戻る { カウント: 0, 人: { 名前: 'xxx' }, 編曲: [1, 2, 3] } } }) 配列メソッド function Vue (options) { // ここではデータの操作のみ考慮します let data = options.data if (データ) { data = this._data = typeof data === 'function' ? data.call(this) : data } 観察者(データ) } 関数オブザーバー(データ) { if (typeof data !== 'object' || data === null) { データを返す } if (data.__ob__) { // __ob__ 属性が存在するということは、それが傍受されたことを示している return data } 新しいオブザーバー(データ) } arrayMethods、Observer、__ob__の実装と機能については、以下をお読みください。 オブザーバークラスの実装クラスオブザーバー{ コンストラクタ(データ){ Object.defineProperty(data, '__ob__', { // 配列ハイジャックに必要な、データの __ob__ プロパティを定義します。enumerable: false, // 列挙できません。configurable: false, // 構成できません。value: this // 値は Observer インスタンスです。}) if (Array.isArray(data)) { //配列をインターセプトする data.__proto__ = arrayMethods //プロトタイプ継承 this.observerArray(data) } else { // オブジェクトのインターセプション this.walk(data) } } 歩く(データ){ 定数キー = Object.keys(データ) for(let i = 0; i < keys.length; i++) { 定数キー = キー[i] defineReactive(データ、キー、データ[キー]) } } observerArray (data) { // 配列内の各項目をインターセプトします data.forEach(value => observer(value)) } } オブジェクトの傍受オブジェクトハイジャックに関して注意すべき点がいくつかあります。
//処理オブジェクトのインターセプト関数 defineReactive(data, key, value) { observer(value) // value がまだオブジェクト型の場合は、再帰的にハイジャックする必要があります Object.defineProperty(data, key, { 得る() { 戻り値 }, set(新しい値){ (newValue === value)の場合、戻り値 値 = 新しい値 observer(newValue) // newValue 値もオブジェクト型の場合は、ハイジャックする必要があります} }) } 配列ハイジャック配列ハイジャックに関して注意すべき点がいくつかあります。
const oldArrayPrototype = Array.prototype 配列メソッド = Object.create(oldArrayPrototype) const methods = ['push', 'pop', 'shift', 'unshift', 'splice', 'sort', 'reverse'] // 元の配列を変更できるメソッド methods.forEach(method => { 配列Methods[メソッド] = 関数(...引数) { const result = oldArrayPrototype[methods].call(this, ...args) const ob = this.__ob__ // これはメソッドを呼び出す配列です let insert; // 配列に新しく追加された項目のコレクションをインターセプトする必要があります switch(methods) { ケース 'プッシュ': ケース 'unshift': 挿入された = 引数 ケース 'スプライス': insert = args.slice(2) // spliceの2番目のパラメータが追加されるため} if (挿入) { ob.observerArray(挿入) } 結果を返す } }) 原則の概要インタビューでは、Vue のレスポンシブ原則を手書きする必要がある場合、上記のコードで十分です。しかし、Vue のソースコードを学習することで、面接で以下のような要約回答ができれば、面接官からより好まれるでしょう。 Vue 2.0 ソースコードのレスポンシブ原則:
Vue 3.0 ソースコードのレスポンシブ原則:
定数ハンドラ = { 取得(ターゲット、キー) { (typeof target[key] === 'object' && target[key] !== null){ 新しいProxy(target[key], handler)を返す } Reflect.get(ターゲット、キー) を返します。 }, (ターゲット、キー、値)を設定する{ if(key === 'length') が true を返す コンソールログ('更新') Reflect.set(ターゲット、キー、値) を返します。 } } 定数オブジェクト = { 編曲: [1, 2, 3], カウント: { 数値: 1 } } // obj はプロキシのターゲット オブジェクト、handler は構成オブジェクトです。const proxy = new Proxy(obj, handler) Vue のデータ応答性の原則に関する詳細な説明はこれで終わりです。Vue のデータ応答性に関するより関連性の高いコンテンツについては、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。 以下もご興味があるかもしれません:
|
<<: ActiveMQ メッセージ サービスを構築するための Docker 学習方法の手順
>>: MySQL 5.7.16 のインストールと設定方法のグラフィック チュートリアル (Ubuntu 16.04)
Nginxの仕組みNginx はコアとモジュールで構成されています。 Nginx 自体は実際にはほと...
フレックスレイアウトを使用すると、9つの正方形のグリッドであれば、図に示すように均等に分割できます。...
MySql データベース システムをインストールして構成します。 1. ダウンロード http://...
Vue でprovide+inject組み合わせを使用するまず、App.vue を変更する必要があ...
MySQL ログイン パスワードを忘れた場合、解決方法は実はとても簡単です。MySQL メイン構成フ...
背景すべては、WeChat 技術グループのクラスメートが「写真の主な色を取得する方法はあるか」と尋ね...
目次実際のプロジェクトで遭遇する要件実装が間違っているところもある私は個人的に、実装するより良い方法...
html <div class="totop" v-show="...
1. MySQL ログイン設定を変更します。 # vim /etc/my.cnf文を追加: skip...
MySQL タイム ブラインド インジェクションの 5 つの遅延方法 (PWNHUB の予期しない解...
インデックスを追加すると、クエリの効率が向上します。インデックスを追加するということは、ドキュメント...
従来、開発者はインスタンスで必要になる可能性のあるデータに対して JavaScript クラス内にプ...
違い: 1. InnoDB はトランザクションをサポートしていますが、MyISAM はサポートしてい...
スクリプトの要件: MySQL データベースを毎日バックアップし、スクリプトを 7 日間保存します。...
目次1. 主な機能2. 実装のアイデア3. コードの実装4. エフェクト表示V. 結論1. 主な機能...