Un exemple de démarrage avec les propriétés, méthodes et écouteurs calculés par Vue

Présentation de Vue, les propriétés calculées, les méthodes et les auditeurs sont des points de connaissances essentiels. Pour plus de commodité et de simplicité, nous utilisons cette fois le même exemple pour obtenir le même effet en utilisant trois méthodes : propriétés calculées, méthodes et écouteurs. Sans plus attendre, montez dans la voiture.

Effet :

J'ai défini deux valeurs​​name1 et name2 dans Vue L'effet attendu est de sortir le nom en HTML, et le nom est l'épissage de. nom1+nom2 Devenez. Que le nom1 change ou que le nom2 change, le nom changera en conséquence.

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

Effet de navigateur :

1. Effet de mise en œuvre de l'attribut calculé

<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 : calculé est un attribut calculé. Il peut également être calculé littéralement, c'est-à-dire que nom1 et nom2 sont assemblés pour finalement générer un nom.

Veuillez noter que les attributs calculés sont mis en cache, c'est-à-dire qu'ils ne seront recalculés que lorsque nom1 ou nom2 change et est différent de la valeur dans le cache.

Si name1 ou name2 ne change pas, le calcul ne sera pas recalculé.

2. La méthode méthode produit l'effet

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

Remarque : L'expression d'interpolation {{name()}} doit avoir des parenthèses.

Contrairement aux propriétés calculées, tant que la page est chargée une fois, la méthode est exécutée une fois et il n'y a pas de mise en cache.

3. Effet d'implémentation de l'écouteur

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

Remarque : L'implémentation de l'écouteur peut être comprise littéralement pour surveiller les changements dans name1 et name2 , s'il y en a. un changement, le nom sera réattribué. Ici, il existe une valeur par défaut pour le nom.

Enfin

Trois méthodes peuvent réaliser la même méthode, alors laquelle est la meilleure ?

Le meilleur est le premier attribut calculé. Par rapport à la deuxième méthode, l'attribut calculé est mis en cache, ce qui permet d'économiser des performances, et par rapport à la troisième méthode, le code est plus simple.

Tout le monde les comprendra de mieux en mieux après être devenu compétent.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!