データの応答性について話す前に、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 に なぜ画像のように オブジェクト.defineProperty上記の例では、オブジェクトを定義するときに get と set を直接使用していますが、オブジェクトが宣言されている場合、どのようにして get を追加し続けるのでしょうか?要件 3 である var_xxx = 0 オブジェクト.defineProperty(obj3,'xxx',{ 得る(){ _xxxを返す }, 設定(値){ _xxx=値 } }) 次に、最初の問題を解決します。Vue はデータに対して具体的に何を行うのでしょうか?いくつかの例を見てみましょう。 データ0 = { 0 です } まず、data0 を宣言します。要件 1: データ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 成功に設定されています しかし、相手が 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
それではタイトルに戻りましょう。データの応答性とは何でしょうか?オブジェクトは外部刺激に反応できる場合、応答性があると言えます。 Vue のデータはレスポンシブです。const 以上がVueデータ応答性の詳細な概要です。Vueデータ応答性の詳細については、123WORDPRESS.COMの他の関連記事に注目してください。 以下もご興味があるかもしれません:
|
>>: Linux で tcpdump コマンドを使用してデータ パケットをキャプチャおよび分析する方法の詳細な説明
コード: <input type="text" class="t...
目次1. はじめに2. axiosインターセプターを使用してフロントエンドログを出力する1. はじめ...
1. はじめにMySQL にはレプリケーション ソリューションが付属しており、次のような利点がありま...
usemap は <img> タグの属性であり、使用するイメージ マップの名前を指定する...
/****************** * 高度な文字デバイス ドライバー ***********...
データベースアカウントのパスワード暗号化の詳細な説明と例データベースアカウントとパスワードはデータベ...
1. 環境の説明(1) CentOS-7-x86_64、カーネルバージョン uname -r は、 ...
この記事はGitHub https://github.com/qq449245884/xiaozhi...
目次問題の説明シナリオインターフェースリターンフロントエンドメニューの定義vuex のメソッド問題原...
テーブルを切り捨てる個々の行の削除をログに記録せずに、テーブル内のすべての行を削除します。文法 テー...
効果は以下のとおりです。 分析する1. ここでは、点を囲む 3 つの円がズームアニメーションを実行し...
目次1. 需要2. データベース設計3.Javaバックグラウンド構成の実装4. WeChatアプレッ...
Web ページを作成するときに、クールでスムーズなドロップダウン メニューが必要になることがあります...
目次Dockerfileを使用してDockerイメージを構築する1. Dockerfile とは何で...
1. MMMの紹介: MMM は、Multi-Master Replication Manager...