Ein Beispiel für den Einstieg in die von Vue berechneten Eigenschaften, Methoden und Listener

Beim Erlernen von Vue für Anfänger sind berechnete Eigenschaften, Methoden und Zuhörer wesentliche Wissenspunkte. Der Einfachheit halber verwenden wir dieses Mal dasselbe Beispiel, um mit drei Methoden den gleichen Effekt zu erzielen: berechnete Eigenschaften, Methoden und Listener. Steigen Sie ohne weitere Umschweife einfach ins Auto.

Effekt:

Ich habe in Vue zwei Werte namens1 und name2 definiert. Der erwartete Effekt besteht darin, den Namen in HTML auszugeben, und der Name ist die Verkettung von Name1 +Name2. Unabhängig davon, ob sich Name1 oder Name2 ändert, ändert sich der Name entsprechend.

<div id="root">
        {{name}}
    </div>

    <script>
        
        // 父组件
        new Vue({
            el:"#root", 
            data:{
                name1:&#39;jiang&#39;,
                name2:&#39;he&#39;,
                name:&#39;jiang he&#39;,
            }
        })
     </script>

Browsereffekt:

1. Berechneter Attributimplementierungseffekt

<div id="root">
        {{name}}
    </div>

    <script>
        
        // 父组件
        new Vue({
            el:"#root", 
            data:{
                name1:&#39;jiang&#39;,
                name2:&#39;he&#39;,
            },
           
            computed:{
                name:function(){
                 return this.name1+&#39; &#39;+this.name2;
              }
            }
        })
    </script>

Analyse : berechnet ist ein berechnetes Attribut. Es kann auch wörtlich berechnet werden, dh Name1 und Name2 werden zusammengefügt, um schließlich einen Namen zu generieren.

Bitte beachten Sie, dass berechnete Attribute zwischengespeichert werden, d. h. sie werden nur dann neu berechnet, wenn sich Name1 oder Name2 ändert und vom Wert im Cache abweicht.

Wenn sich Name1 oder Name2 nicht ändert, wird die Berechnung nicht neu berechnet.

2. Methode zur Erzielung des Effekts

<div id="root">
        {{name()}}
    </div>

    <script>
        
        // 父组件
        new Vue({
            el:"#root", 
            data:{
                name1:&#39;jiang&#39;,
                name2:&#39;he&#39;,
            },
           
            methods:{
                name:function(){
                    return this.name1+&#39; &#39;+this.name2;
                }
            }
            
        })
    </script>

Hinweis: Der Interpolationsausdruck {{name()}} muss Klammern haben.

Im Gegensatz zu berechneten Eigenschaften wird die Methode einmal ausgeführt und es findet kein Caching statt, solange die Seite einmal geladen wird.

3. Wirkung der Listener-Implementierung

<div id="root">
        {{name}}
    </div>

    <script>
        
        // 父组件
        new Vue({
            el:"#root", 
            data:{
                name1:&#39;jiang&#39;,
                name2:&#39;he&#39;,
                name:&#39;jiang he&#39;,
            },
            watch:{
                name1:function(){
                    this.name= this.name1+&#39; &#39;+this.name2;
                 },
                name2:function(){
                    this.name= this.name1+&#39; &#39;+this.name2;
                }
            }

Hinweis: Die Überwachung der Listener-Implementierung besteht darin, Änderungen in name1 und name2 zu überwachen, falls vorhanden Bei einer Änderung wird der Name neu vergeben. Hier gibt es einen Standardwert für den Namen.

Endlich

Drei Methoden können die gleiche Methode erreichen. Welche ist also die beste?

Das beste ist das erste berechnete Attribut. Im Vergleich zur zweiten Methode wird das berechnete Attribut zwischengespeichert, was Leistung spart, und im Vergleich zur dritten Methode ist der Code einfacher.

Jeder wird sie immer besser verstehen, wenn er sie beherrscht.

Das obige ist der detaillierte Inhalt vonEin Beispiel für den Einstieg in die von Vue berechneten Eigenschaften, Methoden und Listener. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!