Explication détaillée de la différence entre méthode et calculé dans Vue (tutoriel détaillé)-js tutoriel-php.cn

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

亚连

Libérer： 2018-06-01 11:12:46

original

1677 Les gens l'ont consulté

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>

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(&#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>

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 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.

Php8, je viens aussi

Apprenez la mise en page d'un site Web en 30 minutes

Tutoriel vidéo Shangguan Oracle débutant à compétent

Votre première ligne de code UNI-APP

Flutter de zéro au lancement de l'application

Brother Lian Nouveau didacticiel vidéo Linux

Tutoriel vidéo AXURE 9 (convient à l'interface utilisateur interactive de conception de produits du chef de produit)

Tutoriel vidéo PS Zero Basic Proficiency

Tutoriel vidéo de 16 jours sur l'interface utilisateur pour vous aider à démarrer

Tutoriel vidéo sur les techniques PS et les techniques de découpage

Tutoriel vidéo sur la construction et le lancement de projets d'Alibaba Cloud Environment

Présentation des réseaux informatiques - Connaissances de base que les programmeurs doivent maîtriser

Tutoriel essentiel pour les programmeurs - Explication du protocole HTTP

Tutoriel vidéo Websocket

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