Quelle est la différence entre calculé et méthodes dans Vue.js ? (avec des exemples)

Le contenu de cet article porte sur quelle est la différence entre les méthodes calculées et les méthodes dans Vue.js ? (Avec des exemples), 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 vous sera utile.

Cela a été expliqué dans les documents officiels. Je vais enregistrer ma compréhension ici.

Scénarios d'utilisation du calcul

Pour les expressions logiques complexes dans les modèles HTML, afin d'éviter que la logique ne soit trop lourde et difficile à maintenir, la logique pertinente doit être mis en attributs calculés.

Par exemple, celui-ci

<div id="root">
     <p>Reversed message: "{{ message.split(&#39;&#39;).reverse().join(&#39;&#39;) }}"</p>
</div>

Ici, le modèle n'est plus une simple logique déclarative. Voici la chaîne inversée qui souhaite afficher le message variable. De telles expressions contenant un traitement logique complexe doivent utiliser des propriétés calculées.

La différence entre calculé et méthodes

1 calculé est un appel d'attribut, tandis que les méthodes sont un appel de fonction

Cela signifie que dans l'interpolation HTML. < La méthode définie par 🎜>

computed est appelée sous forme d'accès aux attributs, comme les méthodes {{reversedMessageComputed}>

Vous devez ajouter () pour appeler, comme {{reversedNameMethod(. ) }}, sinon le contenu suivant sera rendu dans la vue

function () { [code natif] }

2. >

ici Permettez-moi de citer la documentation officielle

Les propriétés calculées sont mises en cache en fonction de leurs dépendances. Ils ne sont réévalués que lorsque les dépendances associées changent.

<!-- html -->
<div id="root">
    <p>Reversed message: "{{ reversedNameMethod() }}"</p>
    <p>Reversed message: "{{ reversedMessageComputed }}"</p>
</div>

Dans l'exemple ci-dessus, la mise en cache signifie que tant que le message n'a pas changé, accéder plusieurs fois à la propriété calculée reverseMessageComputed renverra immédiatement le résultat du calcul précédent sans avoir à réexécuter la fonction. . La méthode reverseNameMethod() réexécutera la fonction à chaque fois qu'elle sera appelée.

// javascript
var vm = new Vue({
    el: '#root',
        data: {
        name: 'Alex',
        message: 'Hello'
    },
    methods: {
      reversedNameMethod: function () {
        return this.name.split('').reverse().join('')
      }
    },
    computed: {
        // 计算属性的 getter
        reversedMessageComputed: function () {
        // `this` 指向 vm 实例
        return this.message.split('').reverse().join('')
        }
    }
})

Mais en même temps, il est important de noter que cela signifie également que les propriétés calculées suivantes ne seront plus mises à jour, car Date.now() n'est pas une dépendance réactive :

La valeur de now sera dans Elle est générée lorsque Vue est instanciée et ne change jamais.

// javascript
computed: {
    now: function () {
        return Date.now()
    }
}

En revanche, la méthode appelante exécutera toujours à nouveau la fonction chaque fois qu'un nouveau rendu est déclenché.

Les autres instructions pour les calculs

les calculs et les méthodes ne peuvent pas avoir le même nom

Vue transmettra tous les éléments des méthodes et des données à l'objet généré par Vue, ce qui remplacera attributs avec des noms en double dans calculés

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!