Vueにおけるfilters,computed,methods,watchのまとめ

computed
役割:属性を計算し、既存の値に基づいて新しい属性値を生成し、returnで新しい属性値を返します.eg:合計価格の計算

 
{{totalPrice}}
 
{{totalPrice}}
 computed: {
    totalPrice () {
        console.log('computed        ')
        return this.price * this.total
    }
 }

(1)計算属性はVueインスタンスに混入されます.すなわち、thisコンテキストは自動的にVueインスタンスにバインドされますが、計算属性は矢印関数を使用しているため、thisはこのコンポーネントのインスタンスを指しません.(2)計算後の属性はdataで定義する必要はない.(3)computedプロパティには依存キャッシュがあり、computedバインドメソッドの任意の変数が変更されると、このメソッドは再呼び出されます.前例では、ページはtotalPriceを複数回呼び出しますが、コンソールには「computedプロパティ実装計算総額」が1回しか表示されません.(4)computedはパラメータを受け入れず,データはすべてdataから取得する.シーン:新しいプロパティを生成する必要がある場合や複雑な論理計算.
filters
役割:フィルタは、データをフォーマットすることに相当します.例えばタイムスタンプフォーマットeg:価格の前に人民元￥を加える

{{ price | priceFormat }}

js: 
filters： {
   priceFormat (val){
    return  `￥${val}`
   }
}

(1)値シーンを参照して返す必要がある:テキストフォーマット.
watch
役割:属性をリスニングし、data属性のデータをリスニングし、データが変化した場合、関数を自動的に実行します.eg:都市連動

 watch: {
    curProvs () {
        //      ...
    }
 }

(1)watchコールバック関数は矢印関数を使用できません.矢印関数は親役割ドメインのコンテキストをバインドしているため、thisはVueインスタンスを指していません.(2)リスニングの属性はdataで定義する必要がある.
シーン:データが変更された場合、非同期操作またはオーバーヘッドの大きい操作を実行し、リクエストまたはリスニングルーティングを発行して対応する操作を行います.
methods
methodsには内部メソッド,イベントのコールバックが格納される.
(1)methodsはVueインスタンスに混入する.これらのメソッドは、VMインスタンスから直接アクセスするか、命令式で使用できます.注意methodsでは、親役割ドメインのコンテキストをバインドする矢印関数は使用しないでください.(2)再レンダリングが発生する限り、methods呼び出しは常にこの関数を実行する(3)methodsは関数呼び出し、computed、filtersは属性呼び出しである.
シーン:キャッシュを必要としないたびにmethodsを使用します.