Vueのデータ応答性原則の詳細な説明

Vueのデータ応答性原則の詳細な説明

この記事は主に、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 ソースコードのレスポンシブ原則:

  • オブジェクトは再帰的にインターセプトされるため、データ レベルが深くなるほどパフォーマンスは低下します。
  • 配列項目が多すぎるとパフォーマンスが低下するため、配列は Object.defineProperty を使用してインターセプトされません。
  • data で定義されたデータのみがインターセプトされます。後でインスタンスに vm.newObj = 'xxx' を通じて追加する属性はインターセプトされません。
  • 配列のインデックスと長さの変更はインターセプトされないため、ビューは更新されません。
  • データへの新しい属性の追加や配列のインデックスと長さの変更をインターセプトする必要がある場合は、$setメソッドを使用できます。
  • Object.freeze メソッドを使用すると、データを最適化し、パフォーマンスを向上させることができます。このメソッドを使用するデータは、set メソッドと get メソッドによって書き換えられません。

Vue 3.0 ソースコードのレスポンシブ原則:

  • バージョン 3.0 では、Object.defineProperty の代わりに proxy が使用されています。proxy には 13 個のインターセプション メソッドがあります。オブジェクトと配列を別々に処理する必要はなく、再帰的にインターセプトする必要もありません。これもパフォーマンスの最大の改善点です。
  • 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 をよろしくお願いいたします。

以下もご興味があるかもしれません:
  • Vueデータ応答性原則の配列の詳細な説明
  • Vue のデータ応答性に関する詳細な理解
  • Vue データの応答性の概要
  • Vue のデータ応答性原則に関する知識ポイントのまとめ
  • Vue データの応答性はどのように実装されていますか?
  • Vue のデータ応答性の原理についての簡単な説明
  • Vueはデータ応答性の原理を詳しく説明します

<<:  ActiveMQ メッセージ サービスを構築するための Docker 学習方法の手順

>>:  MySQL 5.7.16 のインストールと設定方法のグラフィック チュートリアル (Ubuntu 16.04)

推薦する

CSS3 で King of Glory マッチング人員読み込みページを実装する方法

King of Glory をプレイしたことがある人なら、このページの効果をよくご存知でしょう。なぜ...

Docker に MySQL をデプロイする例

目次1 コンテナクラウドとは何ですか? 2 Dockerの紹介3 dockerを使ってMySQLをイ...

Typescriptの基本構文13個を共有する

目次1. Tsとは何か2. 基本的な文法1. プリミティブデータ型を宣言する2. オブジェクト型を宣...

シンプルなドラッグ効果を実現するjs

この記事では、簡単なドラッグ効果を実現するためのjsの具体的なコードを参考までに共有します。具体的な...

DockerコンテナにRedisをデプロイする手順の紹介

目次1 つの Redis 設定ファイル2 Dockerコマンドの開始3 docker-compose...

Docker を使用して Go Web アプリケーションをデプロイする方法

目次なぜ Docker が必要なのでしょうか? Docker デプロイメントの例コードの準備Dock...

MySQLアラームの詳細な分析と処理

最近、あるサービスにアラームが発生し、耐えられなくなっています。アラーム情報は次のとおりです。メトリ...

Tomcat は、Springboot プロジェクトの WAR パッケージの起動時にエラーを報告します: 子の起動時にエラーが発生しました

今日、会社の Springboot プロジェクトは、テストのためにテスト サーバーにデプロイする準備...

Vue の基本 MVVM、テンプレート構文、データバインディング

目次1. Vueの概要Vue公式サイトMVVM アーキテクチャ パターンVue の紹介2. Vueを...

Linux システム (Centos6.5 以上) のインストール JDK チュートリアル分析

記事の構成1. 準備2. Java JDK8.0をインストールする3. 環境変数を設定する3. イン...

Nginx 構成 クロスドメイン リクエスト Access-Control-Allow-Origin * 詳細な説明

序文403 クロスオリジン エラーが発生しNo 'Access-Control-Allow-...

MySQL無料インストール版を解凍した後にパスワードが見つからない問題を解決する方法

1. mysql-8.0.21-winx64を解凍する2. 環境変数を設定し、アドレスをbinフォル...

Tomcat でタイムアウトしたセッションを監視および削除する方法

序文偶然、30 分の Tomcat セッション時間は、セッションが作成された後、30 分間のみ有効で...

JavaScript におけるイベント委譲メカニズムと深いコピーと浅いコピーの簡単な分析

目次1. イベントの委任イベントバブリングイベントキャプチャイベントの泡立ちの昇華考える2. 深いコ...

仮想マシンに Windows Server 2008 オペレーティング システムをインストールする

この記事では、Windows Server オペレーティング システムのインストールと企業でのそのア...