Vue データの応答性の概要

Vue データの応答性の概要

データの応答性について話す前に、Vue はデータに対して具体的に何を行うのかという非常に重要な問題を解決する必要があります。まず、仮想プロパティの読み取りと書き込みに使用するゲッターとセッターから始めましょう。

ゲッターとセッター

次のコードがあります

obj0 = {
 姓:「高」
 名前:「袁袁」
 年齢: 18
};

// 要件 1、名前を取得する let obj1 = {
 姓:「高」
 名前:「袁袁」
 名前() {
  this.surname + this.name を返します。
 },
 年齢: 18
};

console.log("要件 1: " + obj1.Name()); //Gao Yuanyuan

現時点では、ログアウトした結果は Gao Yuanyuan であり、これは誰でも理解できますが、名前の後の括弧は削除できますか?いいえ、関数なので括弧を削除するにはどうすればいいでしょうか?これが私たちの要件です

// 要件 2: 名前は括弧なしで取得できる let obj2 = {
 姓:「高」
 名前:「袁袁」
 取得名() {
  this.surname + this.name を返します。
 },
 年齢: 18
};

console.log("要件 2: " + obj2.Name); //Gao Yuanyuan

今回はゲッターを使っており、括弧なしで値を取得できます。では、名前を変更するにはどうすればいいのでしょうか?

// 要件 3: 名前は次のように記述できます。let obj3 = {
 姓:「高」
 名前:「袁袁」
 取得名() {
  this.surname + this.name を返します。
 },
 名前を設定する(xxx){
  this.surname = xxx[0]
  this.name = xxx.slice(1)
 },
 年齢: 18
};

obj3.Name = '高元元'

console.log(`要件 3: 姓 ${obj3.last name}、名 ${obj3.first name}`) // Gao Yuanyuan

get があるところに set があり、それが setter の使用方法です。属性値 = xxx を使用して set 関数をトリガーし、名前を書き込むことができます。ただし、要件 3 にconsole.log(obj3)と入力すると、次の図が表示されます。

なぜ画像のように姓名:(...)が表示されるのでしょうか? これは実際には get set です。ブラウザが名前を表示すると、姓名:(...) 。これは、要件 3 で名前の読み取りと書き込みができることを示していますが、name という属性はありません。代わりに、名前に対する操作をシミュレートするために get と set があります。

オブジェクト.defineProperty

上記の例では、オブジェクトを定義するときに get と set を直接使用していますが、オブジェクトが宣言されている場合、どのようにして get を追加し続けるのでしょうか?要件 3 であるObject.defineProperty使用する必要があります。次のコードを追加することで、定義の後に get と set を追加できます。

var_xxx = 0
オブジェクト.defineProperty(obj3,'xxx',{
 得る(){
  _xxxを返す
 },
 設定(値){
  _xxx=値
 }
})

次に、最初の問題を解決します。Vue はデータに対して具体的に何を行うのでしょうか?いくつかの例を見てみましょう。

データ0 = {
 0 です
}

まず、data0 を宣言します。要件 1: Object.definePropertyを使用して n を定義します。

データ1 = {} とします

オブジェクト.defineProperty(data1, 'n', {
 値: 0
})

console.log(`要件 1: ${data1.n}`) //要件 1: 0

要件2: nは0未満であってはならない:

データ2 = {} とします

data2._n = 0 // _n は n の値を秘密裏に保存するために使用され、デフォルト値は 0 です

オブジェクト.defineProperty(data2, 'n', {
 得る(){
  これを返す。_n
 },
 設定(値){
  if(値 < 0) 戻り値
  this._n = 値
 }
})

console.log(`要件2: ${data2.n}`)//0
データ2.n = -1
console.log(`要件 2: ${data2.n} が -1 に設定され、失敗します`) //0 が -1 に設定され、失敗します data2.n = 1
console.log(`要件 2: ${data2.n} が 1 成功に設定されています`) //0 が 1 成功に設定されています

しかし、相手がdata2._n直接使用した場合はどうなりますか?オブジェクト上でアクセス可能なものを何も公開しないことができますか?現時点ではプロキシを使用する必要があります。

let data3 = proxy({ data:{n:0} }) // 括弧は匿名オブジェクトなのでアクセスできません function proxy({data}){
 定数オブジェクト = {}
 // ここでの 'n' はハードコードされています。理論的には、データのすべてのキーをトラバースする必要があります。ここでは簡略化しています // 理解できないかもしれないので Object.defineProperty(obj, 'n', { 
  得る(){
   データを返す.n
  },
  設定(値){
   if(値<0) 戻り値
   data.n = 値
  }
 })
 return obj // obj はプロキシです}

// data3はobjです
console.log(`要件3: ${data3.n}`)
データ3.n = -1
console.log(`要件 3: ${data3.n}、-1 に設定が失敗しました`)
データ3.n = 1
console.log(`要件 3: ${data3.n}、成功を 1 に設定`)

しかし、エージェントを利用したくない場合はどうすればよいでしょうか?

myData = {n:0} とします
let data4 = proxy({ data:myData }) // 括弧内のオブジェクトは匿名であり、アクセスできません // data3 は obj です
console.log(`引数: ${data4.n}`) //0
私のデータ.n = -1
console.log(`議論: ${data4.n}、-1 に設定できませんでした!?`)

このように myData を変更することは依然として可能なので、別の要件があります。ユーザーが許可なく myData を変更した場合でも、それを傍受する必要があります。

myData5 = {n:0} とします
let data5 = proxy2({ data:myData5 }) // 括弧は匿名オブジェクトなのでアクセスできません function proxy2({data}){
 // ここでの 'n' はハードコードされています。理論的には、データのすべてのキーをトラバースする必要がありますが、ここでは単純化します。let value = data.n // 開始 n を保存します
 Object.defineProperty(data, 'n', //新しいnを宣言する
  得る(){
   戻り値
  },
  set(新しい値){
   if(newValue<0) 戻り値
   値 = 新しい値
  }
 })

上記の文を追加するだけで、これらの文はデータを監視します

定数オブジェクト = {}
 オブジェクト.defineProperty(obj, 'n', {
  得る(){
   データを返す.n
  },
  設定(値){
   if(value<0)return//この文は冗長データです。n = value
  }
 })
 
 return obj // obj はプロキシです}

// data3はobjです
console.log(`要件5: ${data5.n}`) //0
myData5.n = -1
console.log(`要件 5: ${data5.n}、-1 に設定失敗`) //0
myData5.n = 1
console.log(`要件 5: ${data5.n} を 1 に設定しました`) //1

vm = new Vue({data:myData})記述すると、Vue は次の 2 つの処理を実行します。

  1. vmをmyDataのプロキシとすると、これを介してvmにアクセスできます。
  2. myData のすべてのプロパティは監視され、VM が知らないうちに myData のプロパティが変更されるのを防ぎます。プロパティが変更されると、render(data) が呼び出され、UI が自動的に更新されます。

それではタイトルに戻りましょう。データの応答性とは何でしょうか?オブジェクトは外部刺激に反応できる場合、応答性があると言えます。 Vue のデータはレスポンシブです。const const vm = new Vue({data:{n:0}})では、 vm.n が変更されると、UI の n もそれに応じて更新されます。Vue はObject.definePropertyを通じてデータのレスポンシブ性を実装します。
レスポンシブ Web ページとは何ですか?つまり、ウィンドウのサイズを変更すると、それに応じて Web ページの内容も変更されるため、この Web ページはレスポンシブ Web ページと呼ばれます。

以上がVueデータ応答性の詳細な概要です。Vueデータ応答性の詳細については、123WORDPRESS.COMの他の関連記事に注目してください。

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

<<:  MySQLの基礎知識学習ノート

>>:  Linux で tcpdump コマンドを使用してデータ パケットをキャプチャおよび分析する方法の詳細な説明

推薦する

Vue3はフロントエンドのログを出力するためにaxiosインターセプターを使用する

目次1. はじめに2. axiosインターセプターを使用してフロントエンドログを出力する1. はじめ...

MySQLのレプリケーションとチューニングの原則と方法を分析する

1. はじめにMySQL にはレプリケーション ソリューションが付属しており、次のような利点がありま...

IMG での UserMap の使用例

usemap は <img> タグの属性であり、使用するイメージ マップの名前を指定する...

Linux カーネル デバイス ドライバー 高度な文字デバイス ドライバーのメモ

/****************** * 高度な文字デバイス ドライバー ***********...

データベースアカウントのパスワード暗号化の詳細な説明と例

データベースアカウントのパスワード暗号化の詳細な説明と例データベースアカウントとパスワードはデータベ...

CentOS 7 に Percona Server+MySQL をインストールする

1. 環境の説明(1) CentOS-7-x86_64、カーネルバージョン uname -r は、 ...

CSSのさまざまな背景、使用シナリオ、テクニックの詳細な分析

この記事はGitHub https://github.com/qq449245884/xiaozhi...

Vue で動的に追加されたルーティング ページの更新時に失敗する理由と解決策

目次問題の説明シナリオインターフェースリターンフロントエンドメニューの定義vuex のメソッド問題原...

Truncate Table の使用法の説明

テーブルを切り捨てる個々の行の削除をログに記録せずに、テーブル内のすべての行を削除します。文法 テー...

CSS を使用してデータ ホットスポット効果を実現する方法

効果は以下のとおりです。 分析する1. ここでは、点を囲む 3 つの円がズームアニメーションを実行し...

WeChatアプレット開発によりホームページポップアップボックスアクティビティガイダンス機能が実現

目次1. 需要2. データベース設計3.Javaバックグラウンド構成の実装4. WeChatアプレッ...

jQueryはドロップダウンメニューのスライド効果を実現します

Web ページを作成するときに、クールでスムーズなドロップダウン メニューが必要になることがあります...

Dockerfileを使用してDockerイメージを構築する

目次Dockerfileを使用してDockerイメージを構築する1. Dockerfile とは何で...