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 コマンドを使用してデータ パケットをキャプチャおよび分析する方法の詳細な説明

推薦する

2つのシンプルなメニューナビゲーションバーの例

メニューバーの例 1: コードをコピーコードは次のとおりです。 <!DOCTYPE html ...

Zabbixを介してデータベース接続情報といくつかの拡張機能をすばやく取得します

背景アプリケーション システムの数が増え続けると、当初はアラームを発していなかったアクティブ スレッ...

MySQLのExcelへのエクスポート方法の分析

この記事では、MySQL を使用してデータを Excel にエクスポートする方法について説明します。...

ES6 Promiseの使い方の詳細な説明

目次約束とは何ですか?拒否の使用法キャッチの使い方すべての使用法レースの使用約束とは何ですか? Pr...

ウェブページのカスタム選択ボックス選択

選択ドロップダウン リスト フォームは誰もがよく知っているかもしれませんが、デフォルトのドロップダウ...

MySQL 分離レベル操作プロセスの詳細説明 (cmd)

コミットされていない読み取りの例の操作プロセス - コミットされていない読み取り1. 2 つの My...

JavaScriptは入力ボックスコンポーネントを実装します

この記事では、入力ボックスコンポーネントを手動で実装するための具体的なコードを参考までに紹介します。...

HTMLにリンクを挿入する方法

各 Web ページには、URL () で識別されるアドレスがあります。通常、Web サイト内でリンク...

複数の .sql ファイルを MySQL に効率的にインポートする方法の詳細な説明

MySQL には、複数の .sql ファイル (SQL ステートメントを含む) をインポートする方法...

nginx を使用して同じドメイン名で複数の Vue プロジェクトをデプロイし、リバース プロキシを使用する方法

効果現在、プロジェクトは2つ(project1、project2)あり、nginxに付属するinde...

実際のプロジェクトでElementUIを使用する手順の詳細な説明

目次1. テーブル自動ソート2. ページング機能3.el-checkbox-group 複数選択ボッ...

Javascript DOM、ノード、要素取得の紹介

目次DOMノード要素ノード:テキストノード:プロパティ ノード:要素を取得getElementByI...

MySQL 8.0.20 のインストールと設定方法のグラフィックチュートリアル

MySQLのダウンロードとインストール(バージョン8.0.20)のチュートリアルは参考までに、具体的...

シンプルな虫眼鏡効果を実現するJavaScript

大きな箱の中に写真があります。マウスをその上に置くと、半透明のマスク レイヤーが表示されます。マウス...

CentOS 8 Zabbix 4.4 インストール ガイド

Zabbix サーバー環境プラットフォームZABBIX バージョン 4.4セントOS8 MySQL ...