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)

推薦する

Nginxの仕組みの詳細な説明

Nginxの仕組みNginx はコアとモジュールで構成されています。 Nginx 自体は実際にはほと...

フレックスボックスレイアウトの最終行の左揃えの実装アイデア

フレックスレイアウトを使用すると、9つの正方形のグリッドであれば、図に示すように均等に分割できます。...

mysql 5.7.11 winx64.zip インストールと設定方法のグラフィックチュートリアル

MySql データベース システムをインストールして構成します。 1. ダウンロード http://...

Vueはページの部分的なリフレッシュを実装します(ルータビューのページリフレッシュ)

Vue でprovide+inject組み合わせを使用するまず、App.vue を変更する必要があ...

忘れられたMySQLパスワードとログインエラーの問題について簡単に説明します

MySQL ログイン パスワードを忘れた場合、解決方法は実はとても簡単です。MySQL メイン構成フ...

CSS を解析して画像のテーマカラー機能を抽出する (ヒント)

背景すべては、WeChat 技術グループのクラスメートが「写真の主な色を取得する方法はあるか」と尋ね...

Vue Routerはバックグラウンドデータに応じて異なるコンポーネントをロードします

目次実際のプロジェクトで遭遇する要件実装が間違っているところもある私は個人的に、実装するより良い方法...

Centos で MySQL パスワードを変更する方法

1. MySQL ログイン設定を変更します。 # vim /etc/my.cnf文を追加: skip...

MySQL タイムブラインドインジェクションの 5 つの遅延方法

MySQL タイム ブラインド インジェクションの 5 つの遅延方法 (PWNHUB の予期しない解...

MySQLにインデックスを追加しても効果がないいくつかの状況について簡単に説明します。

インデックスを追加すると、クエリの効率が向上します。インデックスを追加するということは、ドキュメント...

JavaScript の遅延読み込み属性パターンを理解する

従来、開発者はインスタンスで必要になる可能性のあるデータに対して JavaScript クラス内にプ...

MySQL MyISAM と InnoDB の違い

違い: 1. InnoDB はトランザクションをサポートしていますが、MyISAM はサポートしてい...

mysql バックアップ スクリプトを作成し、7 日間保存します。

スクリプトの要件: MySQL データベースを毎日バックアップし、スクリプトを 7 日間保存します。...

VUEをベースにしたシンプルな学生情報管理システムの実装

目次1. 主な機能2. 実装のアイデア3. コードの実装4. エフェクト表示V. 結論1. 主な機能...