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

La différence entre la méthode et calculé dans Vue

php中世界最好的语言

Libérer： 2018-03-28 11:48:45

original

1389 Les gens l'ont consulté

Cette fois, je vais vous présenter la différence entre méthode et calculé dans Vue. Quelles sont les précautions lors de l'utilisation de méthode et calculé dans Vue. Voici des cas pratiques, jetons un coup d'œil.

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.

calculé 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 que nous voulons finalement obtenir le résultat final, nous le faisons. can use Computed;

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 : Expressions dans les modèles. sont très pratiques, mais ils ne sont en réalité utilisés que pour des calculs simples. 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 le cas ci-dessus, 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é. Le problème s'aggrave lorsque vous souhaitez afficher le message à l'envers plusieurs fois dans le modèle. C'est pourquoi, pour toute logique complexe, vous devez utiliser des propriétés calculées. Ci-dessous, j'utiliserai la méthode et le 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

Je compare 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 des méthodes lors de son utilisation, et vous devez ajouter ().

Les deux méthodes sont également très différentes en caching. L'attribut calculé est utilisé pour lier le reverseMessage au message. Le reverseMessage ne sera déclenché que lorsque le message change, alors que la méthode méthodes le nécessite. chaque fois que la page est saisie, exécutez cette méthode, mais 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 des 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 :

Affichage de la requête http et du chargement dans Vue2.0

Comment Vue2.0 réalise-t-il la liaison bidirectionnelle des données des composants

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!