Quelle est la différence entre méthode et calculé dans Vue ?-js tutoriel-php.cn

Quelle est la différence entre méthode et calculé dans Vue ?

php中世界最好的语言

Libérer： 2018-04-12 10:49:36

original

1525 Les gens l'ont consulté

Cette fois, je vais vous présenter la différence entre utiliser une méthode et être calculé dans Vue. Quelles sont les précautions lors de l'utilisation d'une méthode et calculé dans Vue. Voici un cas pratique. regarder. .

Les calculs et les méthodes dans les paramètres de configuration du nouveau Vue peuvent gérer une grande quantité de code logique, mais quand utiliser quel attribut, vous devez distinguer soigneusement pour utiliser vue correctement.

calculated est appelé un attribut calculé. Comme son nom l'indique, le calcul doit renvoyer un résultat de calcul. Par conséquent, lorsque nous avons besoin de traiter beaucoup de logique, mais lorsque nous voulons obtenir le résultat final, nous pouvons utiliser calculée

<.> Afin d'illustrer la différence entre méthode et calculé, je voudrais d'abord jeter un œil à ce que dit l'attribut calculé sur le site officiel de Vue : les

Expressions dans les modèles sont très pratiques, mais elles ne sont en réalité que utilisé pour une opération simple. Mettre trop de logique dans un modèle peut le rendre trop lourd et difficile à maintenir.

Regardons un exemple :

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="javascript/vue.min.js"></script>
</head>
<body>
<p id="app">
//直接在模板中绑定表达式
<p>{{message.split('').reverse().join('')}}</p>
//运用计算属性
<p>message反转之后的结果:{{reverseMessage}}</p>
</p>
<script>
var vm=new Vue({
el:"#app",
data:{
message:"hello"
},
computed:{
reverseMessage:function(){
return this.message.split('').reverse().join('');
}
}
})
</script>
</body>
</html>

Copier après la connexion

Dans ce cas, le modèle n’est plus simple et clair. Il faut confirmer une seconde fois avant de se rendre compte qu'il s'agit d'un message inversé. Lorsque vous souhaitez afficher plusieurs fois de manière inversée dans un modèle message , le problème va s'aggraver. C'est pourquoi, pour toute logique complexe, vous devez utiliser des propriétés calculées. Ci-dessous, j'utiliserai la méthode et calculé pour comparer :

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="javascript/vue.min.js"></script>
</head>
<body>
<p id="app">
<p>{{message}}</p>
//直接在模板中绑定表达式
<p>{{message.split('').reverse().join('')}}</p>
//运用计算属性
<p>{{reverseMessage}}</p>
//运用methods方式
<p>{{methodMessage()}}</p>
</p>
<script>
var vm=new Vue({
el:"#app",
data:{
message:"hello"
},
computed:{
reverseMessage:function(){
return this.message.split('').reverse().join('');
}
},
methods:{
methodMessage:function () {
return this.message.split('').reverse().join('');
}
}
})
</script>
</body>
</html>

Copier après la connexion

J'ai comparé ces deux méthodes. Le résultat renvoyé est le même, mais dans la méthode de calcul des attributs calculés, vous n'avez pas besoin d'ajouter () lors de l'utilisation d'attributs, tandis que la méthode méthodes doit être utilisée comme une méthode, et vous devez ajouter ().

Les deux méthodes sont également très différentes en matière de

mise en cache Utiliser les propriétés calculées. reverseMessage est lié au message. ReverseMessage ne sera déclenché que lorsque le message change. La méthode des méthodes consiste à exécuter cette méthode à chaque fois que vous entrez dans la page. Cependant, lorsque vous utilisez des informations en temps réel, telles que l'affichage de l'heure actuelle d'entrée dans la page. , vous devez utiliser la méthode méthodes .

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

Explication détaillée de la requête http de Vue2.0 et de l'utilisation de l'affichage de chargement

le processus du nœud et les modules child_process Explication détaillée de l'utilisation

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!