vue2.xの研究ノート（5）

そして、上記の内容：https://www.cnblogs.com/yanggb/p/12571062.html。

計算されたプロパティ

テンプレート内での発現は非常に便利ですが、彼らは主に簡単な操作のために設計されています。テンプレートにあまりにも多くのロジックを置く場合は、テンプレートが重すぎると維持が困難になります。

< DIV ID = "例" >
  {{message.split（ ''）。）（逆。ジョイン（ ''）}}
</ DIV >

例えば、上記のコードでは、テンプレートは、もはや単純な宣言型ロジックである、あなたは、読み出し時に、ここにあなたが文字列変数の逆転を表示したいメッセージがあることを実現するためにかなりの時間を通過する必要がありません。あなたがここにテンプレートで複数回引用符で囲まれた文字列を逆にしたい場合は、あなたが複数の参考文献に記述された同じ表現を繰り返す必要があるため、に対処するために、より困難になります。このように、任意の複雑なロジックのために、私たちは、計算されたプロパティを使用することをお勧めします。

属性ごとの計算の例

< DIV ID = "例" > 
  < P >オリジナルメッセージ： "{{メッセージ}}" </ P > 
  < P >計算結果メッセージを反転： "{{reversedMessage}}" </ P > 
</ DIV >

そこVM =新しいヴュー（{
  「#example」
  データ：{
    メッセージ：「こんにちは」
  }、
  計算：{
    //プロパティのゲッターを計算
    reversedMessage：関数（）{
      // `this`ポイントVMインスタンス
      （ ''）this.message.splitを返します。）（逆。参加（ ''）
    }
  }
}）

結果：

オリジナルメッセージ：「こんにちは」
計算された逆のメッセージ：「olleH」

上記の例では、宣言された属性reversedMessageの計算。私たちは、プロパティvm.reversedMessageゲッター機能として使用する機能を提供します。

console.log（vm.reversedMessage）// => 'olleH' 
vm.message = 'さようなら' 
にconsole.log（vm.reversedMessage）// => 'eybdooG'

この時点で、ブラウザのコンソールは、VMの独自の例を変更する場合は、vm.reversedMessageの値は常にvm.messageの値に依存します。

私たちは、共通のプロパティをバインディングとテンプレートの結合特性を計算することができます。VUEノウハウvm.reversedMessageがvm.messageに依存しているのでvm.messageの値は、すべてがvm.reversedMessageバインディングに依存して変化したときに、その更新されます。そして、すべての最高は、私たちはこの依存関係を作成するための宣言的な方法を持っていることです。それは変わりませんので、属性値が依存している、プロパティのゲッター機能が副作用（副作用）ではない計算します。Vm.reversedMessageの上記の例では、計算の性質を容易に理解し、試験したように、vm.message（依存的）の値を変更しません。

プロパティキャッシュ対計算方法

メソッドを呼び出すことによって、発現した場合、その後、同じ効果の特性を達成するために計算されてもよいです。

< P >逆メッセージ： "{{reversedMessage（）}}" </ P >

// アセンブリにおける
メソッド：{
  reversedMessage：関数（）{
     戻り 、この '。）（逆参加.message.splitを（'）（ '' ）
  }
}

上記の例から分かるように、我々は、同じ関数の代わりに計算属性のための方法を定義することができ、そして2つの方法の最終結果は確かに同じです。しかし、場所、キャッシュ属性はその依存応答計算された属性は、その依存性応答計算された属性に基づいてキャッシュされているに基づいて計算されていることを二つの異なる方法は、その依存関係の応答に基づいてキャッシュされ、計算プロパティが再評価されます関連応答のみ依存した変化。長いメッセージなどが変更されていないとして、プロパティの前の計算結果に多くの訪問が再び機能を実行することなく、すぐにreversedMessage計算を返すこと。この手段は、この機能は、キャッシュ[の]と呼ばれています。

計算：{
  今：関数（）{
     リターンDate.now（）
  }
}

Date.now（）が更新に対応していないので、次に、上記の例では、計算された属性は、もはや更新されません。これとは対照的に、いつでも、トリガーの再レンダリングは、常にこの方法は再び機能を実行します呼び出します。

キャッシュされたページを意味することは、パフォーマンスを向上させることです。パフォーマンスオーバーヘッドプロパティAを計算するがたくさんあると仮定し、それは巨大な配列を横断し、多くの計算を行う必要があるが、今回は別の属性計算BがAに依存しているAがキャッシュされていない場合、我々は必然的になります計算値はそのまま返された場合でも、プロパティのゲッター機能で何回も行っています。そして、この機能の[キャッシュ]と、それは、多くの時間がAの属性計算を実行するために大幅にページのパフォーマンスを向上させることがあり、不必要なゲッターの機能を回避することです。

それは、[キャッシュ]この特性を、両者の間にほとんど差以外に言うことができるためとされていない場合、キャッシュは、あなたは、交換する方法を使用することができます。

ゲッター計算プロパティ

デフォルトの属性は、ゲッターに計算されますが、必要なときに、あなたはまた、セッターを提供することができます。

// ... 
計算：{
  フルネーム： {
    // ゲッター 
    GET：機能（）は{
       返す この .firstName + '' + この.lastNameを
    }、
    // セッター 
    セット：機能（newValueに）{
       VARの名= newValue.split（」 ' ）
       この .firstName =名[0 ]
       この .lastName =名[names.length - 1 ]
    }
  }
}
// ...

ブラウザのコンソールで実行vm.fullName =「XXX XXXX」時間、setter関数が呼び出された場合、この時間は、vm.firstNameとvm.lastNameはそれに応じて更新されます。

リスナー（リスナーのプロパティ）

VUEは、変更と応答データVUEのインスタンスを観察するために、より汎用性の高い方法を提供します。コンピューティングの特性は、より多くの場合に適切なものの、時にはまた、カスタムリスナー（リスナーのプロパティ）が必要です。データは変更する必要があるときにオーバーヘッド大非同期動作の実施または、このアプローチは有用です。

< DIV ID = "ウォッチ-例" > 
  < P >
    はい/いいえ質問をするん：
    < 入力Vモデル= "質問" > 
  </ P > 
  < P > {{回答}} </ P > 
</ DIV >

<！ - 生態AJAXライブラリと共通のツールすでにかなり豊富なので、Vueのコアコードが繰り返されません - >
<！ - 薄い滞在するためにこれらの機能を提供します。それはまた、あなたの彼らのより多くの使い慣れたツールを選択する自由を可能にします。 - >
<スクリプトSRC = "https://cdn.jsdelivr.net/npm/[email protected]/dist/axios.min.js"> </ SCRIPT>
<スクリプトSRC = "https://cdn.jsdelivr.net/npm/[email protected]/lodash.min.js"> </ SCRIPT>
<スクリプト>
VAR watchExampleVM = 新しいヴュー（{
  エル： '＃時計-例' 、
  データ：{
    質問： '' 、
    答え：「あなたが質問をするまで、私はあなたに答えを与えることはできません！」
  }、
  見る： {
    // `question`が変更された場合、この機能が実行されます 
    。質問：機能（newQuestion、oldQuestion）{
       この '... STOPのタイピングにあなたを待って' .answerを=
       この.debouncedGetAnswer（）
    }
  }、
  作成：関数（）{
     // `_.debounce` Lodash制限動作を介して、周波数の関数です。
    // この例では、アクセスyesno.wtf/apiの頻度を制限したい
    // ユーザーの入力が完了するまで、AJAX要求が発行されます。詳細情報には
    、// `_.debounce`知識機能（およびその近くrelatives`の_.throttle`）、および
    // HTTPS：を参照してください//lodash.com/docs#debounce 
    この .debouncedGetAnswer = _.debounce （この .getAnswer、500 ）
  }、
  方法：{
    getAnswer：関数（）{
       場合（この === .question.indexOf（）-1 '？' ）{
         この .answer =「質問、通常は疑問符が含まれています。;-)」
         復帰
      }
      この .answer = '思考...'
       のvar VM = この
      axios.get（ 'http://www.yanggb.com.cn/api' ）
        .then（関数（応答）{
          vm.answer = _.capitalize（response.data.answer）
        }）
        。キャッチ（関数（誤差）{
          vm.answer =「エラー！APIに到達できませんでした。'+ エラー
        }）
    }
  }
}）
</ SCRIPT>

この例では、我々は時計のオプションは、非同期操作（アクセスAへのAPI）を使用することができます、我々は動作周波数の制限を行い、我々は最終的な結果、中間状態を得る前に。これらの計算された属性は、実行することはできません。

計算プロパティ対リスナーのプロパティ

あなたが変更と変更に他のデータニーズを持ついくつかのデータを持っている場合は、あなたが簡単に虐待された時計のリスナーのプロパティをすることができ、通常、より良い練習が不可欠時計のコールバックではなく、計算属性を使用することです。

< DIV ID = "デモ" > {{}}のfullName </ DIV >

そこ VM = 新しいヴュー（{
  上： '#demo' 、
  データ：{
    firstNameの： 'foo'で、
    lastNameという： 'バー' 、
    fullName：「フーバー」
  }、
  見る： {
    firstName：関数（ヴァル）{
       この .fullName =ヴァル+ '' + この.lastName
    }、
    lastNameの：関数（ヴァル）{
       この .fullName = この .firstName + '' + ヴァル
    }
  }
}）

上記のコードでは、リスニング、姓と名の二つの性質は、これらの2つのプロパティの変更がスプライス2 FullNameプロパティへのコールバックリスナー属性、属性値をトリガーする場合。このアプローチは不可欠である、と関数が2つのリスナーのプロパティを繰り返しています。

そこ VM = 新しいヴュー（{
  上： '#demo' 、
  データ：{
    firstNameの： 'foo'で、
    lastNameの： 'バー'
  }、
  計算：{
    fullName：関数（）{
       戻り 、この '.firstName +を' + この.lastName
    }
  }
}）

そして、宣言、より簡潔なコードにプロパティを計算した後、多くをオフにします。

「私はまだあなたのような、時間などのDimei笑顔、千の言葉。」

おすすめ