Maison > Article > interface Web > Explication détaillée de la différence entre méthode et calculé dans Vue (tutoriel détaillé)

Explication détaillée de la différence entre méthode et calculé dans Vue (tutoriel détaillé)

亚连original: 2018-06-01 11:12:461721parcourir

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. Cet article présente principalement la différence entre la méthode et le calcul dans Vue. Les amis qui en ont besoin peuvent se référer à

Les méthodes calculées et calculées dans les paramètres de configuration du nouveau Vue peuvent gérer une grande quantité de code logique, mais quand les utiliser. lequel ? Les attributs doivent être soigneusement distingués 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'expliquer 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é utilisés que pour des opérations 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(&#39;&#39;).reverse().join(&#39;&#39;)}}</p>
//运用计算属性
<p>message反转之后的结果:{{reverseMessage}}</p>
</p>
<script>
var vm=new Vue({
el:"#app",
data:{
message:"hello"
},
computed:{
reverseMessage:function(){
return this.message.split(&#39;&#39;).reverse().join(&#39;&#39;);
}
}
})
</script>
</body>
</html>

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(&#39;&#39;).reverse().join(&#39;&#39;)}}</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(&#39;&#39;).reverse().join(&#39;&#39;);
}
},
methods:{
methodMessage:function () {
return this.message.split(&#39;&#39;).reverse().join(&#39;&#39;);
}
}
})
</script>
</body>
</html>

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 une méthode, et vous devez ajouter ().

Les deux méthodes sont également très différentes en termes de mise en cache. L'attribut calculé est utilisé pour lier le reverseMessage au message. Le reverseMessage ne sera déclenché que lorsque le message change. La méthode méthodes consiste à exécuter la méthode à chaque fois que la page est modifiée. saisi, mais dans Lors de l'utilisation d'informations en temps réel, telles que l'affichage de l'heure actuelle d'entrée dans la page, des méthodes doivent être utilisées.

Ce qui précède est ce que j'ai compilé pour vous. J'espère que cela vous sera utile à l'avenir.

Articles Liés

Voir plus