データの応答性について話す前に、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 コマンドを使用してデータ パケットをキャプチャおよび分析する方法の詳細な説明
メニューバーの例 1: コードをコピーコードは次のとおりです。 <!DOCTYPE html ...
背景アプリケーション システムの数が増え続けると、当初はアラームを発していなかったアクティブ スレッ...
この記事では、MySQL を使用してデータを Excel にエクスポートする方法について説明します。...
目次約束とは何ですか?拒否の使用法キャッチの使い方すべての使用法レースの使用約束とは何ですか? Pr...
選択ドロップダウン リスト フォームは誰もがよく知っているかもしれませんが、デフォルトのドロップダウ...
コミットされていない読み取りの例の操作プロセス - コミットされていない読み取り1. 2 つの My...
この記事では、入力ボックスコンポーネントを手動で実装するための具体的なコードを参考までに紹介します。...
各 Web ページには、URL () で識別されるアドレスがあります。通常、Web サイト内でリンク...
MySQL には、複数の .sql ファイル (SQL ステートメントを含む) をインポートする方法...
効果現在、プロジェクトは2つ(project1、project2)あり、nginxに付属するinde...
目次1. テーブル自動ソート2. ページング機能3.el-checkbox-group 複数選択ボッ...
目次DOMノード要素ノード:テキストノード:プロパティ ノード:要素を取得getElementByI...
MySQLのダウンロードとインストール(バージョン8.0.20)のチュートリアルは参考までに、具体的...
大きな箱の中に写真があります。マウスをその上に置くと、半透明のマスク レイヤーが表示されます。マウス...
Zabbix サーバー環境プラットフォームZABBIX バージョン 4.4セントOS8 MySQL ...