この記事は主に、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)
King of Glory をプレイしたことがある人なら、このページの効果をよくご存知でしょう。なぜ...
目次1 コンテナクラウドとは何ですか? 2 Dockerの紹介3 dockerを使ってMySQLをイ...
目次1. Tsとは何か2. 基本的な文法1. プリミティブデータ型を宣言する2. オブジェクト型を宣...
この記事では、簡単なドラッグ効果を実現するためのjsの具体的なコードを参考までに共有します。具体的な...
目次1 つの Redis 設定ファイル2 Dockerコマンドの開始3 docker-compose...
目次なぜ Docker が必要なのでしょうか? Docker デプロイメントの例コードの準備Dock...
最近、あるサービスにアラームが発生し、耐えられなくなっています。アラーム情報は次のとおりです。メトリ...
今日、会社の Springboot プロジェクトは、テストのためにテスト サーバーにデプロイする準備...
目次1. Vueの概要Vue公式サイトMVVM アーキテクチャ パターンVue の紹介2. Vueを...
記事の構成1. 準備2. Java JDK8.0をインストールする3. 環境変数を設定する3. イン...
序文403 クロスオリジン エラーが発生しNo 'Access-Control-Allow-...
1. mysql-8.0.21-winx64を解凍する2. 環境変数を設定し、アドレスをbinフォル...
序文偶然、30 分の Tomcat セッション時間は、セッションが作成された後、30 分間のみ有効で...
目次1. イベントの委任イベントバブリングイベントキャプチャイベントの泡立ちの昇華考える2. 深いコ...
この記事では、Windows Server オペレーティング システムのインストールと企業でのそのア...