집 >웹 프론트엔드 >JS 튜토리얼 >Vue.js의 계산 및 메소드의 다양한 메커니즘에 대한 심층 분석

Vue.js의 계산 및 메소드의 다양한 메커니즘에 대한 심층 분석

亚连원래의: 2018-05-26 16:06:181445검색

이 기사에서는 Vue.js의 계산 및 메소드의 다양한 메커니즘을 소개합니다. 이 기사에서는 계산과 메소드의 차이점도 언급합니다. 함께 살펴보세요

vue.js에는 메서드를 동적으로 사용하고 메서드로 계산하는 두 가지 방법이 있습니다

1. 가장 먼저 눈에 띄는 차이점은 호출할 때 메서드를 ()

2로 추가해야 한다는 것입니다. 계산을 대체하는 방법을 사용하십시오. 두 가지 효과는 동일하지만 계산은 종속성 캐시를 기반으로 하며 관련 종속성이 변경될 때만 재평가됩니다.

메소드를 사용하면 다시 렌더링할 때 항상 함수가 다시 호출되어 실행됩니다.

이해의 편의를 위해 먼저 소스 코드를 업로드하겠습니다

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

실행 결과는 위와 같습니다. 계산된 속성이 입력되면 입력될 때마다 페이지는 항상 처음부터 정보를 사용하고 이제 다시 트리거되지 않음을 알 수 있습니다. 이는 캐싱에 따라 다릅니다. (지연이 있는 경우 여러 출력 시간은 동일합니다.)

그럼 해당 종속성이 변경되면 다시 평가되는 값은 무엇입니까? 예를 들어 reversedMessage 함수의 계산된 속성에서 메시지 변수가 호출되는 경우()

, 이는 메시지가 여전히 존재하는 한 변경 사항이 없으며 reversedMessage 계산 속성에 대한 다중 액세스는 함수를 다시 실행할 필요 없이 이전에 계산된 결과를 즉시 반환한다는 것을 의미합니다.

메서드는 실시간입니다. 다시 렌더링할 때 함수는 항상 캐싱 없이 다시 호출되어 실행됩니다(여러 출력 시간은 다름).

계산된 성능을 사용하는 것이 더 좋다고 말할 수 있지만, 캐시하고 싶지 않다면 메소드 속성을 사용할 수 있습니다.

계산된 속성에는 기본적으로 getter만 있지만 필요한 경우 setter를 제공할 수도 있습니다. 따라서 실제로 계산된 속성은 매개변수를 전달할 수도 있습니다.

ps: vue의 계산된 속성과 메소드의 차이점을 살펴보겠습니다.

在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中可以只执行逻辑代码，可以有返回值，也可以没有。

위 내용은 제가 나중에 모든 사람을 위해 정리한 내용입니다. .

Vue.js의 계산 및 메소드의 다양한 메커니즘에 대한 심층 분석

관련 기사