Maison >interface Web >js tutoriel >Une analyse approfondie des différents mécanismes de calcul et méthodes dans Vue.js

Une analyse approfondie des différents mécanismes de calcul et méthodes dans Vue.js

亚连original: 2018-05-26 16:06:181445parcourir

Cet article vous présente les différents mécanismes de calcul et de méthodes dans Vue.js. Dans vue.js, les méthodes et calculés sont utilisés dynamiquement comme méthodes. L'article mentionne également la différence entre calculé et méthodes. jetez un oeil

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 différence est que lors de l'appel, les méthodes doivent être ajoutées avec. ()

2. Nous pouvons utiliser des méthodes pour remplacer calculé. Les deux effets sont les mêmes, mais calculé est basé sur son cache de dépendances, uniquement lorsque les dépendances pertinentes changent.

Avec les méthodes, lors du re-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: &#39;.test2&#39;,
      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. On peut voir que si l'attribut calculé est utilisé, la première information sera utilisée à chaque fois que la page est saisie, et ne le sera plus maintenant. déclenché à nouveau. Cela dépend du 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 calculated améliorera les 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(&#39;ok&#39;)
           //这里根据情况，可以返回有返回值也可以没有返回值。
        }
    }
   })
</script>
对比computed 和 methods：
computed计算的结果如果不发生改变就不会触发result这个函数。而methods中一般都是定义的需要事件触发的一些函数。每次只要触发事件，就会执行对应的方法。如果把computed中的方法写到method中会浪费性能。
computed必须返回一个值页面绑定的才能取得值，而methods中可以只执行逻辑代码，可以有返回值，也可以没有。

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

Articles associés :

Communication Ajax et cgi sous serveur Boa (tutoriel graphique)

Appels Ajax interface reposante Méthode de transmission de données au format Json (avec code)

Le problème selon lequel IE8 ne peut pas s'actualiser à chaque fois lors de l'utilisation de l'accès ajax

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：Une brève discussion sur la pratique de la mise en cache persistante WebpackArticle suivant：Une brève discussion sur la pratique de la mise en cache persistante Webpack

Articles Liés

Voir plus