Was sind vue-berechnete Eigenschaften?

vue-berechnete Eigenschaften: Vor der Version [Vue.js 0.12.8] wird der entsprechende Getter erneut ausgeführt, solange die entsprechende berechnete Eigenschaft gelesen wird. In der Version [Vue.js 0.12.8] wurde diesbezüglich eine Optimierung durchgeführt, d. h. der Getter wird nur dann erneut ausgeführt, wenn sich der Attributwert, von dem das berechnete Attribut abhängt, geändert hat. Berechnete Eigenschaften von vue: Berechnete Eigenschaften Wird ebenfalls synchronisiert und automatisch aktualisiert.

Der Code lautet wie folgt:

<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
            }
        }
    })

Wenn sich die Werte von vm.didi und vm.family ändern, wird der Wert von vm.didiFamily automatisch aktualisiert und der DOM-Teil wird automatisch synchron aktualisiert.

　Das vorherige Beispiel stellt zusätzlich zu Gettern nur Getter bereit. Wir können auch Setter für berechnete Eigenschaften festlegen. Das Codebeispiel lautet wie folgt:

<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]
                }
            }
        }
    })

Wenn der Wert von vm.didiFamily festgelegt ist, werden auch die Werte von vm.didi und vm.family automatisch aktualisiert.

2. Zwischenspeicherung berechneter Attribute

Die Funktionen berechneter Attribute sind zwar attraktiv, aber wenn in der Methode berechneter Attribute eine große Anzahl zeitaufwändiger Vorgänge ausgeführt wird, kann dies zu Leistungsproblemen führen. Wenn beispielsweise eine Schleife über ein großes Array ausgeführt wird, um viele Vorgänge in einem Getter für berechnete Eigenschaften auszuführen, führt dies zu vielen unnötigen Vorgängen, wenn die berechnete Eigenschaft häufig aufgerufen wird.

　Vor Vue.js Version 0.12.8 wird der entsprechende Getter erneut ausgeführt, solange die entsprechende berechnete Eigenschaft gelesen wird. In Vue.js Version 0.12.8 wurde dieser Aspekt optimiert, d. h. der Getter wird nur dann erneut ausgeführt, wenn sich der Eigenschaftswert, von dem die berechnete Eigenschaft abhängt, geändert hat.

Es gibt auch ein Problem: Der Getter wird nur dann erneut ausgeführt, wenn sich das beobachtete Datenattribut in der Vue-Instanz ändert. Aber manchmal basieren berechnete Eigenschaften auf nicht beobachtbaren Dateneigenschaften in Echtzeit. Das Codebeispiel lautet wie folgt:

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

Wir müssen jedes Mal, wenn wir auf das Beispiel zugreifen, die neueste Zeit abrufen, anstatt die zwischengespeicherte Zeit. Ab Vue.js Version 0.12.11 wird standardmäßig ein Cache-Schalter bereitgestellt. Geben Sie das Cache-Feld im berechneten Attributobjekt an, um zu steuern, ob Caching aktiviert werden soll. Das Codebeispiel lautet wie folgt:

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

Nachdem der Cache auf „false“ gesetzt und der Cache ausgeschaltet wurde, wird die Getter-Methode jedes Mal erneut ausgeführt, wenn direkt auf vm.example zugegriffen wird.

3. Häufig gestellte Fragen

Bei der Verwendung berechneter Eigenschaften in der tatsächlichen Entwicklung werden wir auf verschiedene Probleme und Lösungen stoßen.

Szenario, in dem der Getter für berechnete Attribute nicht ausgeführt wird

　 Aus dem vorherigen Punkt haben wir gelernt, dass, wenn sich das Datenattribut ändert, von dem das berechnete Attribut abhängt, die Getter-Methode des berechneten Attributs ausgeführt wird. In einigen Fällen wird die Getter-Methode des berechneten Attributs jedoch nicht ausgeführt, obwohl sich das abhängige Datenattribut geändert hat. In einigen Fällen wird die Getter-Methode des berechneten Attributs jedoch nicht ausgeführt, obwohl sich das abhängige Datenattribut geändert hat.

　　　　Wenn der Knoten, der das berechnete Attribut enthält, entfernt wird und das Attribut an anderer Stelle in der Vorlage nicht mehr referenziert wird, wird die entsprechende Getter-Methode des berechneten Attributs nicht ausgeführt. Das Codebeispiel lautet wie folgt:

<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
            }
        }
    })

Wenn auf die Schaltfläche geklickt wird, um showTotal auf false zu setzen, wird das P-Element entfernt und die Getter-Methode des berechneten Attributs totalPrice innerhalb des P-Elements wird nicht ausgeführt. Aber wenn das berechnete Attribut immer in der Vorlage erscheint, wird die Getter-Methode trotzdem ausgeführt einzelnes Datenelement. In Versionen vor Vue.js 0.12 können wir die v-component-Direktive für das Element verwenden, in dem sich v-repeat befindet. Das Codebeispiel lautet wie folgt:

<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
                    }
                }, 
            }
        }
    })

In Vue.js Version 0.12 hat Vue.js die V-Component-Direktive aufgegeben, daher müssen wir benutzerdefinierte Elementkomponenten verwenden, um berechnete Eigenschaften in V-Repeat zu implementieren. Das Codebeispiel lautet wie folgt:

<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
                    }
                }, 
            }
        }
    })

Verwandte kostenlose Lernempfehlungen:

js-Video-Tutorial

Das obige ist der detaillierte Inhalt vonWas sind vue-berechnete Eigenschaften?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!