Vueがプロパティを計算理解、財産、時計のリスニングで計算しました

自分の理解:

  • 、宣言直接内部計算定義されていないデータ変数を変数の独自の定義を監視するために計算され、その後、我々は、双方向データバインディング、またはページ上で使用される他の処理の結果を示すことができます。
  • 計算されたリターンが結果値を処理するための変数やオブジェクトの数に適しているの後、変数の数の倍数である値が変更されている例えば、我々は、この値が変更される監視することである:商品のショッピングカート内リストとの合計量との関係限り、リストの変更内部品の量、又は減少又は増加または項目を削除するには、合計量が変更されるべきです。ここでの合計金額が計算されたプロパティを使用して計算された最良の選択であります

そして、の違いを見て:

  それは無邪気に計算して、使用するときは常に、どのような時に時計を使用して、最終的に教えて始まりました。ここではおおよそ、自分の理解について話:

  • :監視はVUEのインスタンスを変更するために、当然の変数は、それが文の中のデータで変数を監視することができ、それはまた、ターゲットすることができますが、私たちは、たとえば、次のように監視することはできません主に時計を監視する必要があります
見る:{ 
goodsList.price(newValに、OLDVAL){ 
    //商品のリストが監視されている商品価格
} 
}

このようなエラーが発生しました。オブジェクト全体またはのみ、以下のように、単一の変数を監視します。

コードをコピー
 データ(){ 
        リターン{ 
          example0: ""、
          例1: ""、
          例2:{ 
             :. 1 inner0、          
                           innner1:2          
                     } 
      } 
    }、
時計:{ 
 example0(newValに、OLDVALは){//単一の変数を監視
           ... 
   }、
例2 (newValに、OLDVAL){//監視対象 ...... }
}
コードをコピー
  • 特殊入力ボックス等の一般的な入力値をルーティング監視するためのウォッチ、それがより適切であるシーンデータは、データに影響を与える複数であります

以下はからの抜粋ですhttps://www.w3cplus.com/vue/vue-computed-intro.html  :©w3cplus.com

計算属性は(すぐにビューを計算するために使用することができるビューに属性を示します)。これらの計算は、キャッシュされ、必要なときにのみ更新されます。

ビューVueの設定で様々な方法があります。

  • 使用説明書は、直接ビューにデータ値をバインド
  • コンテンツの単純な変換のための単純な式を使用して
  • フィルタの単純な変換を使用してコンテンツ

また、我々はまた、データモデルや属性を使用して計算された値のセットに基づいて計算された値を表示することができます。

計算されたプロパティ

プロパティを計算することは、私たちが指定されたビュー、複雑な値を計算することができます。これらの値は、必要なときにのみ更新され、依存関係の値にバインドされます。

例えば、我々は、データモデルができた結果の配列を:

私たちが話題の合計数を確認したいとします。私たちは使用できないフィルタまたは式を、このタスクを達成するために。

  • フィルタ:単純なデータ形式のために、アプリケーションを必要とする複数の位置に
  • :ストリームの操作やその他の複雑なロジックが許可されていません。彼らはそれをシンプルに保つ必要があります

今回は、性質が便利になることができます計算します。次のように我々は、計算モデルに値を追加することができます。

結果は以下の通りであります:

対計算方法属性

我々はヴューを使用することができる方法合計スコア分野を計算するために、結果の得られた合計数は同じです。

上記の例に基づいて、我々は計算のブロックtotalMarks 全体的な機能に移動する方法です。一方、テンプレートに{{totalMarksは}}  交換{{totalMarks()}} 次のように、最終的な結果は同じです参照してください。

これらの2つの方法の結果が同じ出力ですが、パフォーマンスは壊滅的な打撃を被るだろう。この方法を使用してtotalMarks()各ページのレンダリングが(例えば、すべての使用して一度に実行されている方法の変更を)。

如果我们有一个计算属性,那么Vue会记住计算的属性所依赖的值(在我们这个示例中,那就是results)。通过这样做,Vue只有在依赖变化时才可以计算值。否则,将返回以前缓存的值。这也意味着只要results还没有发生改变,多次访问totalMark计算属性会立即返回之前的计算结果,而不必再次执行函数。

上面两个示例也说明,在Vue中计算属性是基于它们的依赖进行缓存的,而方法是不会基于它们的依赖进行缓存的。从而使用计算属性要比方法性能更好。

这也同样意味着下面的计算属性将不再更新,因为Date.now()不是响应式依赖:

相比之下,每当触发重新渲染时,方法的调用方式将总是再次执行函数。因此,函数必须是一个纯函数。它不能有副作用。输出只能依赖于传递给函数的值。

那么我们为什么需要缓存?假设我们有一个性能开销比较大的的计算属性A,它需要遍历一个极大的数组和做大量的计算。然后我们可能有其他的计算属性依赖于 A 。如果没有缓存,我们将不可避免的多次执行 A 的 getter!如果你不希望有缓存,请用方法来替代。

计算属性的setter

计算属性默认只有getter,不过在需要时你也可以提供一个setter

效果如下:

あなたは、入力ボックスに入力したのfullName 、クリックセットボタンを、あなたは対応する結果を見ることができます。あなたは実行app.fullName =「AIREN遼」プロパティ算出セッターが呼ばれ、app.firstName app.lastNameはまた、それに応じて更新されます。下図のように:

オブザーバー:

ほとんどの場合、プロパティの計算がより適切なものの、時にはあなたは、自己の定義必要ウォッチャーをVueの理由はここにある時計は、データの変化に応じて、より一般的な方法の選択肢を提供します。あなたがデータに応じて変更したい場合には、非常に有用である、非同期操作またはオーバーヘッドより大きな操作を行います。

:Vueが変更とVueのインスタンス上の応答データを観察するために、より汎用性の高い方法を提供し、ウォッチのプロパティをあなたは他のデータといくつかのデータを持っているときに変更し、変更する必要がある、あなたは簡単に虐待さできるウォッチを多くの場合、しかし、良いアイデアは、コマンドスタイルではなく、計算属性を使用することです時計のコールバック。このような、次の例のように:

上記のコードタイプはコマンド及び繰り返しです。これは、計算プロパティのバージョンと比較しました。

 

おすすめ

転載: www.cnblogs.com/wasbg/p/11416477.html