Vue のデータ応答性に関する詳細な理解

Vue のデータ応答性に関する詳細な理解

1. ES 構文のゲッターとセッター

Vue のデータ応答性の原則を理解する前に、まず ES 構文での getter メソッドと setter メソッドの具体的な使用法を理解する必要があります。

ゲッター メソッドとセッター メソッドは、get キーワードと set キーワードを使用してオブジェクトに仮想プロパティを追加する方法です。このプロパティは実際には存在しませんが、ゲッター関数とセッター関数によってシミュレートされます。目的は、特定の属性に対してストレージ関数と値取得関数を設定し、属性のアクセス動作をインターセプトし、属性のアクセスに何らかの制限を加えることです。下記の通り(以下のコードはmdnから引用)

ゲッターメソッド

定数オブジェクト = {
  ログ: ['a', 'b', 'c'],
  get latest() { //通常のメソッドの前にgetキーワードを追加します if (this.log.length == 0) {
      未定義を返します。
    }
    this.log[this.log.length - 1]を返します。
  }
}

console.log(obj.latest); // 出力c、括弧なしのプロパティ名を取得

セッターメソッド

定数言語 = {
  現在の(名前)を設定する{
    this.log.push(名前);
  },
  ログ: []
}

language.current = 'EN';
language.current = 'FA';

console.log(language.log); // 出力配列 ["EN", "FA"]

2. ES構文でのdefineProperty

defineProperty メソッドは、オブジェクトに直接新しいプロパティを定義するか、オブジェクトの既存のプロパティを変更して、このオブジェクトを返します。このオブジェクトは、定義後にオブジェクトのプロパティを変更または追加するために使用できます。
構文は次のとおりです。

オブジェクト.defineProperty(obj, prop, 記述子)

一般的なプロパティを追加します。

データ = {
  メートル: 0
}

Object.defineProperty(データ, 'n', {
  value: 1 //追加された属性の値は、その値です})
console.log(`${data.n}`) // n の値は 1 として出力されます

仮想プロパティのゲッターとセッターを追加するためにも使用できます

データ1 = {
    _n: 0
}

オブジェクト.defineProperty(data1, 'n', {
  得る(){
    これを返す。_n
  }, 
  設定(値){
    if(値 < 0) 戻り値
    this._n = 値
  }//get / setと書くだけ }) //仮想属性はn、つまりget n(){}、set n(value){}と指定されているので、関数定義にnを書く必要はない

3. Vueのプロキシとデータの監視

エージェント、つまり代理人とは、簡単に言うと、自分の所有物の一部を自分で処理するのではなく、他の人に任せて代わりに処理してもらうことです。その仕事をする人がエージェントです。この論理には、明確にする必要がある重要な点が 2 つあります。エージェントは操作を処理する人ですが、エージェントが操作を処理する物はエージェントのものではなく、エージェントとして彼を委託した人のものであるということです。

したがって、Vue データ プロキシと同様に、プロキシは data{} データ オブジェクトであり、プロキシは Vue インスタンス vm です。data{} データ オブジェクトは、data{} データ オブジェクト内のデータ操作を管理するために vm をプロキシする必要があります。したがって、data{} データ オブジェクトは内部データの生成のみを担当し、生成されたデータの管理と操作は完全に vm によって処理されます。

では、vm は data{} データ オブジェクト内のデータをどのように制御および操作するのでしょうか?言い換えると、vm は data{} データ オブジェクト内の属性値がいつ変更されたかをどのようにして知るのでしょうか?

そのため、ES 構文の getter メソッドと setter メソッドが使用されます。getter メソッドと setter メソッドによって制御されるプロパティに対する操作は、これら 2 つの関数によって検出されます。getter メソッドと setter メソッドによって形成されるプロパティは仮想プロパティであり、実際には存在しません。したがって、ユーザーがプロキシ VM を経由せずに data{} データ オブジェクトのプロパティを直接変更する場合、対応するエンティティ プロパティは取得できず、getter メソッドと setter メソッドを介してのみ変更でき、変更は VM によって確実に検出されます。

したがって、data{} データ オブジェクトのデータに対する完全な制御を実現するために、vm は、Vue インスタンスの作成時に渡された data{} データ オブジェクトに対して何らかの処理を実行する必要があります。この処理では、data{} データ オブジェクト内の属性を、getter メソッドと setter メソッドによって制御される仮想属性に変換し、プロキシ データ オブジェクト obj に保存して返します。

ただし、ユーザーが元の data{} 属性を直接変更するのを防ぐために、元の data{} オブジェクトのエンティティ属性も変更されます。追加された仮想属性の名前はエンティティ属性名と同じなので、元の実際の属性は仮想属性によって上書きされます。ユーザーが属性値を変更すると、getter メソッドと setter メソッドを通じて仮想属性が変更されます。このようにして、data{} データ オブジェクトのすべてのプロパティに対する変更は、Vue インスタンス vm によって検出されます。

myData = {n:0} とします
let data = proxy({ data:myData }) // let vm = new Vue({data: myData}) と同様

関数プロキシ({data}/* 分解代入*/){
  _n = データ.nとする
  Object.defineProperty(data, 'n', { //元のデータを上書きする。nプロパティget(){
      _nを返す
    },
    set(新しい値){
      if(newValue<0) 戻り値
      _n = 新しい値
    }
  })// data{} データ オブジェクトの独自の属性を変更します。クロージャを使用してコンテキストを形成できるため、元の実際の属性値はクロージャの context_n 内に存在することになります。const obj = {}
  オブジェクト.defineProperty(obj, 'n', {
    得る(){
      データを返す.n
    },
    設定(値){
      data.n = 値
    }
  }) //data{} データ オブジェクトのプロキシを追加し、data{} データ オブジェクトを操作します。 return obj // obj は data{}} のプロキシです。

4. Vue のデータ応答性

いわゆる応答性とは、物事が変化したときにそれに応じて対応することを意味します。

Vue のデータはレスポンシブです。Vue は Object.defineProperty() 関数を使用して、getter メソッドと setter メソッドでデータをプロキシおよび監視します。データが変更されると、Vue はデータに対応する UI ビューを変更します。これが Vue のデータ レスポンシブ性です。

ただし、Vue はリスナーの設定に Object.defineProperty を使用するため、Vue がインスタンス化されたときにデータ オブジェクトに既に存在するプロパティに対してのみリスナーを設定でき、存在しないプロパティや後で追加されたプロパティはリッスンしません。

この問題を解決するには、2 つのアプローチがあります。

1. 事前にすべての資産を申告する

2. Vue.setとthis.$setを使用してプロパティを追加する

Vue.set と this.$set を使用してプロパティを追加すると、後で追加されたプロパティのリスニング操作を設定するように Vue に通知します。

Vue.set('this.data','m','10')
this.$set('this.data','m','10') // 属性 m の値を vm のデータ オブジェクトの値 10 で追加します。

3. 配列の変更

配列にデータを追加する場合、新規追加回数を制御できないため、すべてのデータ値を事前に宣言できず、1つずつ設定するのは面倒すぎます。また、配列はよく使用されるオブジェクトデータ型の1つです。そのため、Vueの作者はpushやpopなどの配列追加および削除関数を改ざんしました。ユーザーがVueを使用して配列を追加および削除する場合、pushとpopを使用しますが、内部で追加の処理が行われます。これらの改ざんされたAPIは、配列の追加のデータプロキシを監視し、データの応答に応じてUIビューを変更します。

上記は、Vue のデータ応答性について深く理解するための詳細な内容です。Vue のデータ応答性の詳細については、123WORDPRESS.COM の他の関連記事に注目してください。

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

<<:  WAMPにインストールするとMySQLが起動できるが、再起動後に起動できなくなる問題の解決方法

>>:  MacにHomebrewをインストールする際の注意点

推薦する

JavaScript の Strict モードの詳細な説明

目次導入厳密モードの使用厳格モードの新機能例外を強制的にスローする変数の使用を簡素化する議論を単純化...

HTML ドロップダウン ボックスの SELECT オプションを変更する複数の方法

フォームが送信されると、返された HTML ページが再レンダリングされ、SELECT コントロールの...

SpringBoot を MySQL に接続してデータを取得し、バックエンド インターフェースに書き込む方法

目次1. 新しいプロジェクトを作成する2. 依存関係を追加する3. SpringコンテナにDrive...

Vue3 はメッセージコンポーネントの例を実装します

目次コンポーネント設計最終的なコンポーネントAPIの定義コンポーネント構造の定義テンプレートとスタイ...

Nodejs 組み込み暗号化モジュールを使用してピアツーピアの暗号化と復号化を実現する詳細な説明

暗号化と復号化は、通信のセキュリティを確保するための重要な手段です。すでに多くの暗号化アルゴリズムが...

Docker に共通コンポーネント (mysql、redis) をインストールする方法

Dockerはmysqlをインストールします docker search mysql 検索 dock...

Dockerサーバーのストレージリソースプール不足問題の解決

目次1. 問題の説明2. 問題分析3. 問題解決1. Dockerのディスク使用量を確認する2. 再...

MySQLの日次統計レポートでは、その日にデータがない場合には0が入力されます。

1. 問題の再現:各日の合計数を日ごとにカウントします。データのない日がある場合、グループ化によっ...

Vue の img の src 画像アドレスの動的スプライシングの問題について

Vue での img の動的スプライシングを見てみましょう。src 画像アドレス、具体的な内容は次の...

MySQL は重複データを削除して最小の ID ソリューションを維持します

オンラインで検索して重複データを削除し、ID が最小のデータだけを残します。方法は次のとおりです。 ...

Vue ルーティングフォールバックに最適なソリューション (vue-route-manager)

目次ルーティングマネージャー背景はじめる問題を解決する方法要約するルーティングマネージャー各ジャンプ...

CSS BEM 記述標準の詳細な説明

BEM は、Web 開発に対するコンポーネントベースのアプローチです。ユーザー インターフェイスを独...

MySQL パーティションテーブルのベストプラクティスガイド

序文:パーティショニングはテーブル設計パターンです。一般的に、テーブル パーティショニングとは、条件...

React Nativeでaxiosを使用してネットワークリクエストを行う方法

フロントエンド開発では、Ajax、jQuery ajax、axios、fetch など、データ要求を...