vue の計算プロパティとは何ですか?

vue 計算プロパティ: [Vue.js 0.12.8] バージョンより前では、対応する計算プロパティが読み取られる限り、対応するゲッターが再実行されます。 [Vue.js 0.12.8] バージョンでは、この点が最適化されています。つまり、計算された属性が依存する属性値が変更された場合にのみゲッターが再実行されます。

vue 計算プロパティ:

1. 計算プロパティ

計算プロパティとは、その依存プロパティの値が変更されると、このプロパティの値が自動的に更新され、関連する DOM 部分も同時に自動的に更新されることを意味します。

コードは次のとおりです。

<div id="example">
        <input type="text" v-model="didi">
        <input type="text" v-model="family">
        <br>
        didi={{didi}},family={{family}},didiFamily={{didiFamily}}
    </div>
    var vm = new Vue({
        el:&#39;#example&#39;,
        data:{
            didi:&#39;didi&#39;,
            family:&#39;family&#39;
        },
        computed:{
            <!-- 一个计算属性的getter -->
            didiFamily:function(){
                <!-- this指向vm实例 -->
                return this.didi+this.family
            }
        }
    })

vm.didi と vm.family の値が変更されると、vm.didiFamily の値が自動的に更新され、DOM 部分が更新されます。自動的に同期して更新されます。

前の例では、実際にはゲッターに加えてゲッターのみを提供しています。計算されたプロパティのセッターを設定することもできます。コード例は次のとおりです。

<div id="example">
        <input type="text" v-model="didi">
        <input type="text" v-model="family">
        <br>
        didi={{didi}},family={{family}},didiFamily={{didiFamily}}
    </div>
    var vm = new Vue({
        el:&#39;#example&#39;,
        data:{
            didi:&#39;didi&#39;,
            family:&#39;family&#39;
        },
        computed:{
            <!-- 一个计算属性的getter -->
            didiFamily:function(){
                get:function(){
                    <!-- this指向vm实例 -->
                    return this.didi+this.family
                },
                <!-- 一个计算属性的setter -->
                set:function(newVal){
                    var names = newVal.split(&#39;&#39;)
                    this.didi = names[0]
                    this.didi = names[1]
                }
            }
        }
    })

vm.didiFamily の値が設定されると、vm.didi と vm.family の値も自動的に更新されます。

2. 計算プロパティのキャッシュ

計算プロパティの機能は確かに非常に魅力的ですが、計算プロパティ メソッドで時間のかかる多数の操作が実行される場合は、ここでパフォーマンスの問題が発生します。たとえば、計算プロパティのゲッターで多くの操作を実行するために大きな配列をループすると、計算プロパティが頻繁に呼び出される場合、多くの不要な操作が発生します。

Vue.js バージョン 0.12.8 より前では、対応する計算されたプロパティが読み取られる限り、対応するゲッターが再実行されます。 Vue.js バージョン 0.12.8 では、この側面が最適化されています。つまり、計算されたプロパティが依存するプロパティ値が変更された場合にのみゲッターが再実行されます。

また、Vue インスタンスで観測されたデータ属性が変更された場合にのみゲッターが再実行されるという問題もあります。ただし、計算されたプロパティは、リアルタイムの 3 つの観察不可能なデータ プロパティに依存する場合があります。コード例は次のとおりです。

var vm = new Vue({
   data:{
       welcome:'welcome to join didiFamily'         
    },
   computed:{
        example:function(){
            return Date.now() + this.welcome    
         }       
     }  
})

サンプルにアクセスするたびに、キャッシュされた時間ではなく最新の時間を取得する必要があります。 Vue.js バージョン 0.12.11 以降、キャッシュ スイッチがデフォルトで提供され、計算された属性オブジェクトのキャッシュ フィールドを指定して、キャッシュを有効にするかどうかを制御します。コード例は次のとおりです。

var vm = new Vue({
   data:{
       welcome:'welcome to join didiFamily'         
    },
   computed:{
        example:function(){
            //关闭缓存，默认为true
            cache:false,
            get:function(){
             return Date.now() + this.welcome               
             }      
         }       
     }  
})

キャッシュを false に設定してキャッシュをオフにすると、vm.example が直接アクセスされるたびに getter メソッドが再実行されます。 。

3. よくある質問

計算プロパティを実際の開発で利用する場合、さまざまな問題に遭遇しますので、よくある問題とその解決策をまとめました。

計算された属性のゲッターが実行されないシナリオ

前のポイントから、計算された属性が依存するデータ属性が変更されると、計算された属性のゲッター メソッドが実行されることがわかりました。 。ただし、依存するデータ属性が変更されたにもかかわらず、計算された属性のゲッター メソッドが実行されない場合があります。ただし、依存するデータ属性が変更されたにもかかわらず、計算された属性のゲッター メソッドが実行されない場合があります。

計算された属性を含むノードが削除され、その属性がテンプレート内の他の場所で参照されなくなった場合、計算された属性の対応するゲッター メソッドは実行されません。コード例は次のとおりです。

<div id="example">
        <button @click=&#39;toggleShow&#39;>Toggle Show Total Price</button>
        <p v-if="showTotal">Total Price = {{totalPrice}}</p>
    </div>
    new Vue({
        el:&#39;#example&#39;,
        data:{
            showTotal:true,
            basePrice:100
        },
        computed:{
            totalPrice:function(){
                return this.basePrice + 1
            }
        },
        methods:{
            toggleShow:function(){
                this.showTotal = !this.showTotal
            }
        }
    })

ボタンをクリックして showTotal を false に設定すると、P 要素が削除され、P 要素内の計算属性 totalPrice のゲッター メソッドは実行されません。ただし、計算された属性が常にテンプレートに表示される場合、getter メソッドは引き続き実行されます。

2. v-repeat で計算された属性を使用する

バックエンドから JSON データ コレクションを取得した後、場合によっては、計算されたプロパティを単一のデータに適用する必要があります。 Vue.js 0.12 より前のバージョンでは、v-repeat が配置されている要素で v-component ディレクティブを使用できます。コード例は次のとおりです。

<div id="items">
        <p v-repeat="items" vue-component="item">
            <button>{{fulltext}}</button>
        </p>
    </div>
    var items = [
        {number:1,text:&#39;one&#39;},
        {number:2,text:&#39;two&#39;}
    ]
    var vue = new Vue({
        el:&#39;#items&#39;,
        data:{
            items:items
        },
        components:{
            item:{
               computed:{
                    fulltext:function(){
                        return &#39;item&#39; +this.text
                    }
                }, 
            }
        }
    })

Vue.js 0.12 バージョンでは、Vue.js は v-component ディレクティブを放棄したため、v-repeat で計算されたプロパティを実装するにはカスタム要素コンポーネントを使用する必要があります。コード例は次のとおりです。

<div id="items">
        <my-item v-repeat="items" inline-template>
            
        </my-item>
    </div>
    var items = [
        {number:1,text:&#39;one&#39;},
        {number:2,text:&#39;two&#39;}
    ]
    var vue = new Vue({
        el:&#39;#items&#39;,
        data:{
            items:items
        },
        components:{
            &#39;my-item&#39;:{
               replace:true, 
               computed:{
                    fulltext:function(){
                        return &#39;item&#39; +this.text
                    }
                }, 
            }
        }
    })

関連する無料学習の推奨事項: js ビデオ チュートリアル

以上がvue の計算プロパティとは何ですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。