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 の他の関連記事に注目してください。

以下もご興味があるかもしれません: