15-Vueの計算プロパティ

通常、ビュー構造を記述するために使用されるテンプレートに式をバインドします.テンプレート内の式に論理が多すぎると、テンプレートが肥大化し、メンテナンスが非常に困難になります.したがって、論理を簡略化するために、ある属性の値が他の属性の値に依存する場合、計算属性を使用することができます.
1.計算属性計算属性とは、属性に依存する値が変化すると、その属性の値が自動的に更新され、それに関連するDOM部分も同期して自動的に更新される

<div id="example">
        "text" v-model = 'a'>
        "text" v-model = 'b'>
        

        a = {{ a }}, b = {{ b }}, cont = {{ cont }}
div>

  var vm = new Vue({
            el: '#example',
            data: {
                a: 1,
                b: 2
            },

 computed: {
 //          getter
       cont: function () {
// this    vm   
        return this.a + this.b
        }
    }
})

前例からvm.aとvm.bの値が変化する場合、vm.contの値は自動的に更新され、DOMセクションの前のインスタンスに同期して更新されます.getterのみが提供されています.実際にはgetterのほかに計算属性のsetterを設定することもできます.

  var app = new Vue({
        el: '#example',
        data: {
            a: 'hah',
            b: 'waw',
        },

    computed: {
       cont: {
             //         getter
       get : function(){
             // this    vm   
       return this.a + " "+ this.b
    },

            //         setter
       set : function( newVal ){
       var names = newVal.split(' ')
       this.a = name [0]
       this.b = name [1]
         }
    }
}
    })

vmを設定するとcontの値の場合vm.aとvm.bの値も自動的に更新されます
2.属性キャッシュの計算+属性メソッドの計算に多くの時間がかかる場合、パフォーマンスに影響します.たとえば、計算属性getterで大きな配列をループして多くの操作を実行すると、その計算属性を頻繁に呼び出すと、計算属性に依存する属性値が変化した場合にのみgetter+が再実行されるという問題があります.vueインスタンスで観察されたデータ属性が変更された場合にのみgetterが再実行されます.ただし、計算プロパティはリアルタイムの非観察データプロパティに依存する場合があります.

"app"> {{ example }} 

var vm = new Vue({
   el: '#app',
   data: {
        welcome :'welcome to china!'
        },

   computed: {
       example: function (){
       return Date.now() + this.welcome
} }
    })

キャッシュ時間ではなくexampleにアクセスするたびに最新のイベントを取得する必要があります.vueはデフォルトでキャッシュスイッチを提供し、計算プロパティオブジェクトでcacheフィールドを指定してキャッシュをオンにするかどうかを制御します.コードの例:

 var vm = new Vue({
        el :'#app',
        data: {
            welcome: 'welcome to china!'
        },
        computed: {
            example: {
                //     ，    true
                cache : false,
                get : function (){
                    return Date.now() + this.welcome
                }
            }
        }
    })

4.よくある質問

4.1計算属性getterが実行しないシーンは、前述の例から、計算属性に依存するデータ属性が変更されると、計算属性のgetterメソッドが実行されることが分かった.ただし、依存するデータ属性が変化する場合もあるが、属性を計算するgetterメソッドは

を実行しない.
計算属性を含むノードが削除され、テンプレート内の他の場所で参照されていない場合、対応する計算属性getterは実行されません.

div id="example">
    'toggleShow'> toggle show total price
    
if = 'show'> total price =  {{ totalprice}} 

var vm = new Vue({
el : '#example',
data: {
show : true,
price : 100
},
computed : {
totalprice : function(){
return this.price + 1
}
},
methods : {
toggleShow : function (){
this.show = !this.show
}
}
})
ボタンをクリックしてshowをfalseにすると、p要素が削除され、p要素内部のコンピュータ属性totalpriceのgetterメソッドは実行されませんが、計算属性がテンプレートにずっと表示されている場合、getterメソッドは実行されます.

<div id="example">
    <button @click = 'toggleShow'> toggle show total price button>
    
    <p> {{ totalprice}} p>
    <p v-if = 'show'> total pirce = {{ totalprice}} p>
div>

v-repeatで計算属性を使用する場合、バックエンドからJSONデータセットを取得した後、カスタム要素の構築を使用してv-repeatで計算属性を使用する

を実現する必要があります.

 var items = [
        { number:1,text:'one'},
        { number:2,text:'two'}
    ]

var vm  = new Vue({
        el: '#app',
        data: {
            items : items
        },
        components : {
            'my-item' : {
                replace :true,
                computed : {
                    fulltext : function(){
                        return 'item' + this.text
                    }
                }
            }
        }
    })