Vueのレスポンシブシステムの原理の詳細な説明

Vueのレスポンシブシステムの基本原則

vue を使用すると、データを操作して対応するビューに影響を与えることができます。では、このメカニズムはどのように実装されるのでしょうか?

考えてみてください。私たちのデータ操作は「誰か」によって監視されているようなものではないでしょうか。データに変更を加えると、「誰か」がそれを感知し、ビューの更新を手伝ってくれる。

では、この「誰か」とは誰なのでしょうか?実は、これは非常に一般的です。基礎編で学んだ Object.defineProperty です。これを使用してデータを処理することで、データを読み取るときの「読み取り」コールバック関数と、データを書き込むときの「書き込み」コールバック関数を実装できます。

次に、この方法の使用法を簡単に確認し、この原則を完全に理解できるようにいくつかの実用的な例を使用します。

1. Object.definePropertyの使い方を確認する

パラメータの説明:

	obj: 対象オブジェクト prop: 操作対象となる対象オブジェクトのプロパティ名 description: 記述子	
	オブジェクトに渡された戻り値

記述子のいくつかの属性。いくつかの属性を簡単に紹介します。

	enumerable、プロパティが列挙可能かどうか。デフォルト値は false です。
	プロパティを変更または削除できるかどうかを構成可能。デフォルト値は false です。
	書き込み可能、​​プロパティが変更可能かどうか、デフォルト値は false
	get、属性を取得するメソッド。
	set、プロパティを設定するメソッド。

完全な使用方法:

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

2. 練習1: Object.definePropertyを使用して人の年齢プロパティを監視する

落とし穴

以下のコードを見てください。一見、何も問題がないように見えますか?

誰かが person の age 属性を読み取ると、 person の age 属性を返します。誰かが person の age 属性を変更すると、 person.age の値を直接変更します。

しかし！学生の皆さん、実行した後、エラーは発生しませんが、コンパイラは「@@Someone read the age property」を出力し続けます。

これはなぜでしょうか?考えてみてください。get 関数で person.age を直接返すと、これは人物の age 属性を再度読み取ることになりますか?このとき、プログラムは age の get 関数を何度も繰り返し実行します。

たとえば、これは、age を読み取りたいので、コンパイラーに person.age を出力したいと伝えるのと同じです。コンパイラーは person.age をチェックし、get 関数があることを発見したので、get 関数を実行します。この時点で、その値を取得することになると思いますが、get 関数が再びコンパイラーに person.age が欲しいと伝えるとは予想していませんでした。こうして悪循環が形成されます！ ！

それで、どうやって解決するのでしょうか? get で person.age を直接返すことはできないので、この属性の値を取得するにはどうすればよいでしょうか?

回答：変数に置き換えることはできますか？

person.age の値を変数 ageNumber に格納します。値を読み取る場合は ageNumber の値を返し、値を変更する場合は ageNumber の値を変更します。

これにより、get 関数と set 関数で person.age を直接使用してアクセスする必要がなくなるのではないでしょうか。

正しいコード

この時点で効果は完了しており、読み取りおよび変更時に監視できます。

3. データブローカー

データブローカーとはどういう意味ですか?

A:簡単に言うと、オブジェクトプロキシを介して別のオブジェクトのプロパティを操作（読み取り/書き込み）することです。

ちょっと抽象的ですよね？次の小さな例でこれを説明しましょう。

教師が生徒の成績を確認または変更したい場合、生徒オブジェクトを直接操作することなく、教師オブジェクトを直接操作できます。

上記で説明したいのは、教師オブジェクト（teacher）が生徒オブジェクト（student）のスコア属性（score）の操作（読み取り/書き込み）を委譲するということです。

4. Vueでレスポンシブ思考を実装する

Vue2 の基本的な知識がある学生は、Vue の data() {} で定義されたデータが vm オブジェクトにマウントされることを知っている必要があります。次に、this.data という名前を通じてデータを操作します。

これは、上記の小さな例のシナリオと同等でしょうか? ここで、vm オブジェクトは、定義したデータ オブジェクト内の属性の操作 (読み取り/書き込み) をプロキシします。

Vue のレスポンシブ原則を完全に実装するために別の例を使用しましょう。

データオブジェクト内のすべての属性をプロキシのVMオブジェクトに渡します（VMにデータオブジェクト内の属性の（読み取り/書き込み）操作を制御させます）。データが変更されると、対応するビューを更新できます。

要約する

1. Vue のデータプロキシ:

vmオブジェクトを使用して、データオブジェクト内の属性の操作（読み取り/書き込み）をプロキシします。

2. Vue のデータプロキシの利点:

データ内のデータのより便利な操作

3. 基本原則:

Object.defineProperty()を使用して、データ オブジェクト内のすべてのプロパティを vm に追加します。

VM に追加される各プロパティに対して、ゲッター/セッターを指定します。

getter/setter内のデータ内の対応する属性を操作 (読み取り/書き込み) します。

4. Vueでレスポンシブ思考を実装する

データ プロキシを使用せずに、データは VM に直接割り当てられ、マウントされます。

1. 下の図の方法は、データオブジェクトのgetとsetを設定するための一般的な方法です。

2. 新しいVueを作成すると、ユーザーが渡したデータオブジェクトがVueインスタンスに直接マウントされます。

次に、Vueインスタンス上のデータオブジェクトを監視します（レスポンシブ処理）

この記事はこれで終わりです。皆さんのお役に立てれば幸いです。また、123WORDPRESS.COM のその他のコンテンツにも注目していただければ幸いです。