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をインストールする際の注意点

推薦する

docker-machineの使い方の詳しい説明

Docker-machineはDockerが公式に提供しているDocker管理ツールです。これは d...

vue-router 履歴モード サーバー側設定プロセス記録

歴史ルート履歴モードとは、HTML5 の履歴 API を使用してクライアント側ルーティングを実装する...

JavaScript における this ポイントの問題の詳細な説明

要約する地球環境 ➡️ ウィンドウ通常関数 ➡️ ウィンドウまたは未定義コンストラクター ➡️ 構築...

Mysqlは実行中のトランザクションを照会し、ロックを待機する方法

navicatを使用してテストと学習を行います。まず、 set autocommit = 0;を使用...

CocosCreatorメッセージ配信メカニズムの詳細な説明

概要この記事は、ゲームビジネスアーキテクチャに関連するコンテンツの紹介から始まります。ゲームビジネス...

JS の querySelector メソッドと getElementById メソッドの違い

目次1. 概要1.1 querySelector() と querySelectorAll() の使...

CSS はコンテナ レベル (div...) タグを 1 つの位置 (ページの右端) に固定します。

コードは次のようになります。 。プロセス{ 境界線:1px 実線 #B7B7B8; 背景:#F8F8...

JS 矢印関数に適さないシナリオは何ですか?

目次概要オブジェクトにメソッドを定義するオブジェクトリテラルオブジェクトプロトタイプ動的コンテキスト...

Web デザイン リファレンス Firefox デフォルト スタイル

W3C は HTML の標準をいくつか確立していますが、ブラウザは独自の定義済みスタイルに従って W...

Docker を使用して Nginx+Flask+Mongo アプリケーションをデプロイする

サーバーにはNginx、データベースサポートにはMongo、Python言語のWebフレームワークに...

ウェブサイトのデザインでは色の階層感覚に注意を払う必要があります

最近、私はデザインには階層感覚が必要だと言っています。この階層感覚には、色の重ね合わせや要素の重ね合...

Vue プロジェクトで TypeScript クラスを適用する方法

目次1. はじめに2. 使用1. @コンポーネント2. 計算、データ、方法3. @props 4. ...

MySQLデータベーストリガーの詳細な説明

目次1 はじめに2 トリガーの紹介3 トリガーを作成する4 トリガーを表示5. トリガーの削除6 結...

CentOS 7 でゲートウェイを変更して IP を設定する方法の例

Centos7 バージョンをインストールするときに、外部ネットワークへの接続を選択すると、外部ネット...

Vueは、選択した月に応じて日付に対応する曜日を動的に表示します。

私たち謙虚なプログラマーは、今でもこう歌わなければなりません。「あなたも私も、この世に生まれて、一日...