Maison > Article > interface Web > L'utilisation et la différence entre calculé et méthodes dans Vue.js

L'utilisation et la différence entre calculé et méthodes dans Vue.js

php中世界最好的语言original: 2018-05-03 15:27:302564parcourir

Cette fois, je vais vous présenter l'utilisation et les différences des méthodes calculées et dans Vue.js. Quelles sont les précautions pour utiliser les méthodes calculées et dans Vue.js. Voici des cas pratiques, prenons un. regarder.

Dans vue.js, il existe deux façons d'utiliser dynamiquement des méthodes et de les calculer en tant que méthodes

1 La première et la plus évidente est que lors de l'appel, les méthodes doivent être ajoutées ( )

2. Nous pouvons utiliser des méthodes pour remplacer calculé. Les effets des deux sont les mêmes, mais calculé est basé sur son cache de dépendances et ne sera réévalué que lorsque les dépendances pertinentes changeront.

Lors de l'utilisation de méthodes, lors du nouveau rendu, la fonction sera toujours rappelée et exécutée

Afin de faciliter la compréhension, téléchargeons d'abord un code source

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>title</title>
    <script src="https://cdn.bootcss.com/vue/2.4.2/vue.min.js"></script>
  </head>
  <body>
    <p class="test">  <!--computed计算属性-->
      <p>{{now}}</p>
      <p>{{now}}</p>
      <p>{{now}}</p>
      <p>{{now}}</p>
      <hr />      <!--横线分割-->
</p>
    <p class="test2">  <!--methods方法，注意new（）加了括号-->
      <p>{{now()}}</p>
      <p>{{now()}}</p>
      <p>{{now()}}</p>
      <p>{{now()}}</p>
    </p>
  </body>
  <script type="text/javascript">
    var myVue = new Vue({
      el: ".test",
      computed: {
        now: function() {
          var yanshi = 0;
          for(var o = 0; o < 2000; o++) {   //延时
            for(var q = 0; q < 2000; q++) {
              yanshi++;
            }
          }
          return Date.now()
        }
      }
    });
    var vue2 = new Vue({
      el: '.test2',
      methods: {
        now: function() {
          var yanshi = 0;
          for(var o = 0; o < 2000; o++) {
            for(var q = 0; q < 2000; q++) {
              yanshi++;
            }
          }
          return Date.now()
        }
      }
    })
  </script>
</html>

Les résultats en cours sont comme ci-dessus, vous pouvez Si vous voyez l'attribut calculé, les informations de la première fois seront utilisées à chaque fois que vous accéderez à la page, et ne seront plus déclenchées désormais. Cela dépend de la mise en cache. (Lorsqu'il y a un délai, plusieurs temps de sortie sont les mêmes)

Alors quelle est la valeur qui sera réévaluée lorsque les dépendances pertinentes changent ? Par exemple, la variable de message est appelée dans l'attribut calculé de la fonction reverseMessage ? ()

Cela signifie que tant que le message n'a pas changé, les accès multiples à la propriété calculée reverseMessage renverront immédiatement le résultat du calcul précédent sans avoir à réexécuter la fonction.

Les méthodes sont en temps réel. Lors du nouveau rendu, la fonction sera toujours rappelée et exécutée sans mise en cache (plusieurs temps de sortie sont différents)

On peut dire que l'utilisation de la volonté calculée avoir de meilleures performances. Mais si vous ne souhaitez pas de mise en cache, vous pouvez utiliser l'attribut méthodes.

L'attribut calculé n'a qu'un getter par défaut, mais vous pouvez également fournir un setter si nécessaire : donc en fait, calculé peut également transmettre des paramètres.

ps : Jetons un coup d'œil à la différence entre les propriétés calculées de vue et les méthodes

在new Vue的配置参数中的computed和methods都可以处理大量的逻辑代码，但是什么时候用哪个属性，要好好区分一下才能做到正确的运用vue。
computed称为计算属性，顾名思义，计算就要返回一个计算的结果，所以，当我们要处理大量的逻辑，但是最后要取得最后的结果的时候可以用computed；
简单示例：
要求：
<input type="text v-model="num1"><input type="text v-model="num2">
现在要返回num1和num2的和；
<script>
  new Vue({
    el:"#box",
    data:{
        num1:0,
        num2:0
        }
    computed:{  
        result:function(){
            return this.num1 + this.num2  
            // 计算属性必须有一个返回值
        }
    }
   })
</script>
methods：是方法的意思，在js中，我们把一些函数叫做方法，一般情况下，要触发这个方法就要执行，要执行就要有一个源来触发，所以就需要一个事件源。这是和computed的一点不同之处；
methods的示例：
要求：
<\button @click="do()">点击弹出<\/button>
<script>
  new Vue({
    el:"#box",
    data:{
        num1:0,
        num2:0
        }
    methods:{  
        do:function(){
           alert('ok')
           //这里根据情况，可以返回有返回值也可以没有返回值。
        }
    }
   })
</script>
对比computed 和 methods：
computed计算的结果如果不发生改变就不会触发result这个函数。而methods中一般都是定义的需要事件触发的一些函数。每次只要触发事件，就会执行对应的方法。如果把computed中的方法写到method中会浪费性能。
computed必须返回一个值页面绑定的才能取得值，而methods中可以只执行逻辑代码，可以有返回值，也可以没有。

Je crois que vous maîtrisez la méthode après avoir lu le cas dans cet article , pour un contenu plus passionnant, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

Explication détaillée des cas d'utilisation des composants angulaires

Quelles sont les méthodes de stockage des valeurs originales et de référence de JS valeurs

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!

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Comment Webpack implémente la mise en cache persistanteArticle suivant：Comment Webpack implémente la mise en cache persistante

Articles Liés

Voir plus