属性のVueの計算

まず、プロパティの計算は何ですか

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

プロパティの使用方法の第二に、計算

　　一つの属性の計算は、最終的な結果はリターンすることができる限り、動作、関数呼び出しを含む複雑なロジック、種々ので行うことができます。

<DIV ID = "例"> 
  <P>オリジナルメッセージ： "メッセージ{} {}" </ P> 
  <P>計算さ逆転メッセージ： "reversedMessage {} {}" </ P> //私たちは、複雑なプロセスを置きます内部のプロパティの計算で
、</ div>

VaRのVM =新しいヴュー（{ 
    EL '#example'、
    データ：{ 
        メッセージ： 'こんにちは' 
    }、
    計算：{ 
        reversedMessage：関数（）{ 
            // `this`指向VM实例
            this.message.split（ ''を返します）.reverse（） ''（参加）。
        } 
    } 
}）。

结果：

オリジナルメッセージ：「こんにちは」

の計算結果を逆メッセージ：「olleH」

　　単純な実施形態の使用に加えて、属性データの複数の算出も、Vueのインスタンスに依存し得る限り、データ変更のいずれかが、それはプロパティの計算を再実行するように、ビューも更新されます。

　　：プロパティのヒントの2回の非常に実用的な計算が簡単に見落とさすることができますがあり、第二は、属性は、現在のVueインスタンスのデータに頼ることができない計算されて、あなたはまた、他のインスタンスからのデータに依存することができます。まず、性質が他のコンピューティングの属性に依存することができます計算など：

    <DIV ID = "APP1"> </ div> 
    <DIV ID = "APP2"> {{reverseText}} </ div>

VARのApp1 =新しい新しいヴュー（{ 
   EL： '＃App1の' 
 データ：{ 
      ：テキスト'計算' 
    } 
;}）

VAR App2の=新しい新しいヴュー（{ 
    '＃App2の'：EL 
    計算：{ 
        reverseText：関数（）{ 
            リターンapp1.text.split（ ''）。逆方向（ ）に参加。（ ''）; //はデータAPP1を用いて計算することが
        } 
    } 
}）。

各計算属性はゲッターとセッターが含まれている、我々は、上記の2つの例がちょうど読むためにゲッターを使用して、デフォルトの使用属性を計算しています。

あなたが望むときに、あなたはまたのような、手動で計算された値は、属性は、それが何かのカスタムを行うには、setter関数をトリガするように、通常のデータを修正したい変更すると、setter関数を提供することができます。

VaRのVMは=新しいヴュー（{ 
    エル： '#demo'、
    データ：{ 
        のfirstName： 'フー'、
        lastNameの'バー' 
    }、
    計算は：{ 
        のfullName：{ 
            //ゲッター
            GET：機能（）{ 
                this.firstName +を返します'' + this.lastName 
            } 
            //セッター
            セット：機能（newValueに）{ 
                VAR名は= newValue.split（」「）; 
                this.firstName =名[0]; 
                this.lastName =名[names.length - 1] ; 
            } 
        } 
    } 
}）。
//ここvm.fullName =「ジョン・ドウ」を実行し、セッターが呼び出されます、vm.firstNameとvm.lastNameはそれに応じて更新されます。

　　ほとんどの場合、我々はあなたがプロパティを計算する宣言するときに、あなたはgetterとsetterすることなく、直接書き込むのデフォルトを使用することができ、ビジネスに、計算されたプロパティを読み取るためにほとんど使用されませんセッターをデフォルトのgetterメソッドを使用します。彼らは宣言されています。

第三に、算出したプロパティキャッシュ　

　　我々は、同様の機能を二つの方法の最終結果が実際に同一であり、この方法ではなく、計算されたプロパティとして定義されて適用することができます。ただ、reverseTitle（）値、使用reverseTitle値を使用します。

　　しかし、差がされ、その性質に基づいて計算さ依存のキャッシングです。それはその依存関係を変更したときに、プロパティの計算のみ再評価されます。

　　これは、長いタイトルが変更されていないとして、多くの訪問が再び機能を実行することなく、すぐに結果の前に財産のリターンを計算reverseTitleことを意味します。

<DIV> {{reverseTitle（）}} </ div>

//アセンブリにおける
方法：{ 
  reverseTitle：関数は、（）{ 
    '..参加戻る）（リバースthis.title.split（'）（ ''）
  } 
}

四、VS法を計算

　　あなたは、私たちは、同じ機能が方法ではなく、計算されたプロパティとして定義されて使用することができ、我々は表現方法で呼び出すことで同じ効果を達成できることに気づいたかもしれません。二つの方法の最終結果は確かに同じです。しかし、差がされ、その性質に基づいて計算さ依存のキャッシングです。それはその依存関係を変更したときに、プロパティの計算のみ再評価されます。これは、限りあることを意味し message ていない変化に多くの訪問 reversedMessage プロパティの前に計算結果が再び機能を実行することなく、計算にすぐに戻ります。（効果をBuffer、また計算次のプロパティが更新されないことを意味する）ので、 Date.now() 式のない依存性応答。

計算：{ 
  今：関数（）{ 
    Date.nowを返します（）
  } 
}

これとは対照的に、いつでも、トリガーの再レンダリング、必ずもう一度関数を実行するメソッドを呼び出します。

　　なぜ我々は、キャッシュする必要がありますか？我々はパフォーマンスのオーバーヘッドは、Aが、それは巨大な配列を横断し、計算の多くを行う必要があり、比較的大きな計算の性質であると仮定します。その後、我々は他のプロパティは、計算A.に依存していて何のキャッシュが存在しない場合、我々は必然的にAのゲッター複数回実行されます！あなたの代わりにメソッドを使用しての、キャッシュを持ってしたくない場合。

第五に、機能特性を計算することは無効である矢印

　　なお、あなたは矢印の機能を使用してはならない属性定義関数（例えばを計算します aDouble: () => this.a * 2）。その理由は、矢印の機能は、親スコープのコンテキストを結合している、それが this 所望の点としてではありません Vue 例えば、this.a それがあろう undefined。

　　もちろん、VUEをポイントするようにこのようなニーズの多くの例があり、我々は注意矢印の機能を必要としています。

四、VS法を計算

第五に、機能特性を計算することは無効である矢印

おすすめ