Quelles sont les différences entre calculé et méthode dans Vue ?

Cet article vous présentera la différence entre calculé et méthode dans Vue. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. J'espère qu'il sera utile à tout le monde.

1. Les deux différences fondamentales entre le calcul et la méthode

Dans le document officiel, il est souligné que la différence la plus importante entre calculé et méthode Les deux points de

• calculé sont des appels d'attributs, et les méthodes sont des appels de fonction

• calculé a une fonction de mise en cache, tandis que les méthodes ne sont pas

OK, regardons un exemple spécifique ci-dessous

<!--HTML部分-->
<div id="app">
    <h1 id="message">{{message}}</h1>
    <p class="test1">{{methodTest}}</p>
    <p class="test2-1">{{methodTest()}}</p>
    <p class="test2-2">{{methodTest()}}</p>
    <p class="test2-3">{{methodTest()}}</p>
    <p class="test3-1">{{computedTest}}</p>
    <p class="test3-2">{{computedTest}}</p>
</div>
<!--script部分-->
let vm = new Vue({
    el: &#39;#app&#39;,
    data: {
        message: &#39;我是消息，&#39;
    },
    methods: {
        methodTest() {
            return this.message + &#39;现在我用的是methods&#39;
        }
    },
    computed: {
        computedTest() {
            return this.message + &#39;现在我用的是computed&#39;
        }
    }
})

2 Appel d'attribut calculé

Des amis prudents peuvent. Je l'ai découvert. Dans l'interpolation HTML

• les méthodes calculées sont appelées sous forme d'accès aux attributs, {{computedTest}}

• mais les méthodes nous doit ajouter () pour appeler la méthode définie, telle que {{methodTest()}}, sinon, la vue apparaîtra test1, voir l'image ci-dessous

3. La fonction cache du calcul

Tout d'abord, nous devons comprendre à quoi sert le cache ?

Par rapport à tout le monde sait que la mise en cache HTTP, sa fonction principale est de réutiliser certaines ressources qui n'ont pas été mises à jour sur le serveur, d'éviter certaines requêtes inutiles et d'optimiser l'expérience utilisateur

La même chose est true pour calculé La même chose :

Dans l'exemple ci-dessus, les méthodes définies par les méthodes sont accessibles sous la forme d'appels de fonction, donc test2-1, test2-2 et test2-3 exécutent à plusieurs reprises la méthode methodTest pour trois fois. Encore une fois, si nous rencontrons un scénario qui nécessite 1 000 valeurs de retour de methodTest, alors il ne fait aucun doute que cela entraînera inévitablement beaucoup de gaspillage

Ce qui est encore plus effrayant, c'est que si vous modifiez la valeur du message, puis ces 1 000 méthodes MethodTest seront recalculées. . . .

C'est pourquoi les documents officiels soulignent à plusieurs reprises que pour toute logique complexe, vous devez utiliser des propriétés calculées

le calcul dépend des données contenues dans data, et uniquement lorsque ses données dépendantes associées changent

Comme dans l'exemple ci-dessus, lorsque Vue est instanciée, calculated définit la méthode ComputedTest pour effectuer un calcul et renvoyer une valeur lors de l'écriture ultérieure du code, tant que la méthode ComputedTest dépend des données du message. ne change pas et la méthode ComputedTest ne recalculera pas, c'est-à-dire que test3-1 et test3-2 obtiennent directement la valeur de retour, pas le résultat du recalcul par la méthode ComputedTest.

Les avantages de ceci sont également évidents. De même, si nous rencontrons un scénario qui nécessite 1000 valeurs de retour de test calculées, alors il ne fait aucun doute que cela économisera considérablement de la mémoire par rapport aux méthodes

Même si vous modifiez la valeur du message, ComputedTest ne sera calculé qu'une seule fois

4. Autres instructions pour calculé

• calculé En fait, cela peut être accessible à la fois comme attribut et comme méthode

• Il y a une raison importante à l'origine du calculé, qui est d'éviter que la logique de l'interpolation de texte ne soit trop lourde et ne rende difficile la maintenir

Recommandations associées :

Résumé des questions d'entretien avec vue frontale 2020 (avec réponses)

Tutoriel vue recommandé : Les 5 dernières sélections de didacticiels vidéo vue.js en 2020

Pour plus de connaissances liées à la programmation, veuillez visiter : Introduction à la programmation! !

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!