집 > 기사 > 웹 프론트엔드 > Vue.js의 계산 및 메소드 사용에 대한 자세한 설명

Vue.js의 계산 및 메소드 사용에 대한 자세한 설명

php中世界最好的语言원래의: 2018-05-09 09:50:573076검색

이번에는 Vue.js의 계산 및 메소드 사용에 대해 자세히 설명하겠습니다. 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: '.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>

실행 결과는 위와 같습니다. 이제 페이지에 들어갈 때마다 계산된 속성이 사용됩니다. 이는 캐싱에 따라 달라집니다. (지연이 있는 경우 여러 출력 시간은 동일합니다.)

그럼 해당 종속성이 변경되면 다시 평가되는 값은 무엇입니까? 예를 들어 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('ok')
           //这里根据情况，可以返回有返回值也可以没有返回值。
        }
    }
   })
</script>
对比computed 和 methods：
computed计算的结果如果不发生改变就不会触发result这个函数。而methods中一般都是定义的需要事件触发的一些函数。每次只要触发事件，就会执行对应的方法。如果把computed中的方法写到method中会浪费性能。
computed必须返回一个值页面绑定的才能取得值，而methods中可以只执行逻辑代码，可以有返回值，也可以没有。

이 기사의 사례를 읽은 후 메소드를 마스터했다고 생각합니다. 더 흥미로운 정보를 보려면 다른 항목에 주의하세요. PHP 중국어 웹사이트에 관련 기사가 있습니다!