VueJS-계산 된 속성

이미 Vue 인스턴스 및 구성 요소에 대한 메서드를 보았습니다. 계산 된 속성은 메서드와 비슷하지만이 장에서 설명 할 메서드와 비교하면 약간의 차이가 있습니다.

이 장의 끝에서 우리는 언제 메서드를 사용할 것인지, 언제 계산 된 속성을 사용할 것인지 결정할 수있을 것입니다.

예제를 사용하여 계산 된 속성을 이해합시다.

<html>
   <head>
      <title>VueJs Instance</title>
      <script type = "text/javascript" src = "js/vue.js"></script>
   </head>
   <body>
      <div id = "computed_props">
         FirstName : <input type = "text" v-model = "firstname" /> <br/><br/>
         LastName : <input type = "text" v-model = "lastname"/> <br/><br/>
         <h1>My name is {{firstname}} {{lastname}}</h1>
         <h1>Using computed method : {{getfullname}}</h1>
      </div>
      <script type = "text/javascript" src = "js/vue_computedprops.js"></script>
   </body>
</html>

vue_computeprops.js

var vm = new Vue({
   el: '#computed_props',
   data: {
      firstname :"",
      lastname :"",
      birthyear : ""
   },
   computed :{
      getfullname : function(){
         return this.firstname +" "+ this.lastname;
      }
   }
})

여기에서 우리는 .html이름과 성이있는 파일. Firstname 및 Lastname은 firstname 및 lastname 속성을 사용하여 바인딩 된 텍스트 상자입니다.

입력 된 이름과 성을 반환하는 계산 된 메서드 getfullname을 호출합니다.

computed :{
   getfullname : function(){
      return this.firstname +" "+ this.lastname;
   }
}

텍스트 상자에 입력 할 때 속성 firstname 또는 lastname이 변경 될 때 함수에 의해 동일한 내용이 반환됩니다. 따라서 computed의 도움으로 함수 호출을 기억하는 것과 같은 특정 작업을 수행 할 필요가 없습니다. 계산되면 내부에서 사용되는 속성, 즉 이름과 성이 변경됨에 따라 자체적으로 호출됩니다.

다음 브라우저에도 동일하게 표시됩니다. 텍스트 상자에 입력하면 계산 된 함수를 사용하여 동일한 내용이 업데이트됩니다.

이제 메서드와 계산 된 속성의 차이점을 이해해 보겠습니다. 둘 다 객체입니다. 값을 반환하는 함수가 내부에 정의되어 있습니다.

메서드의 경우 함수로 호출하고 속성으로 계산합니다. 다음 예제를 사용하여 메서드와 계산 된 속성의 차이점을 이해하겠습니다.

<html>
   <head>
      <title>VueJs Instance</title>
      <script type = "text/javascript" src = "js/vue.js"></script>
   </head>
   <body>
      <div id = "computed_props">
         <h1 style = "background-color:gray;">Random No from computed property: {{getrandomno}}</h1>
         <h1>Random No from method: {{getrandomno1()}}</h1>
         <h1>Random No from method : {{getrandomno1()}}</h1>
         <h1  style = "background-color:gray;">Random No from computed property: {{getrandomno}}</h1>
         <h1  style = "background-color:gray;">Random No from computed property: {{getrandomno}}</h1>
         <h1  style = "background-color:gray;">Random No from computed
            property: {{getrandomno}}</h1>
         <h1>Random No from method: {{getrandomno1()}}</h1>
         <h1>Random No from method: {{getrandomno1()}}</h1>
      </div>
      <script type = "text/javascript">
         var vm = new Vue({
            el: '#computed_props',
            data: {
               name : "helloworld"
            },
            methods: {
               getrandomno1 : function() {
                  return Math.random();
               }
            },
            computed :{
               getrandomno : function(){
                  return Math.random();
               }
            }
         });
      </script>
   </body>
</html>

위의 코드에서 우리는 getrandomno1 함수가있는 계산 된 속성 getrandomno. 둘 다 Math.random ()을 사용하여 난수를 돌려주고 있습니다.

아래와 같이 브라우저에 표시됩니다. 메서드와 계산 된 속성은 차이를 보여주기 위해 여러 번 호출됩니다.

위의 값을 살펴보면 계산 된 속성에서 반환 된 난수가 호출 횟수에 관계없이 동일하게 유지된다는 것을 알 수 있습니다. 즉, 호출 될 때마다 마지막 값이 모두 업데이트됩니다. 메서드의 경우 함수이므로 호출 될 때마다 다른 값을 반환합니다.

계산 된 속성에서 가져 오기 / 설정

이 섹션에서는 예제를 사용하여 계산 된 속성의 get / set 함수에 대해 알아 봅니다.

<html>
   <head>
      <title>VueJs Instance</title>
      <script type = "text/javascript" src = "js/vue.js"></script>
   </head>
   <body>
      <div id = "computed_props">
         <input type = "text" v-model = "fullname" />
         <h1>{{firstName}}</h1>
         <h1>{{lastName}}</h1>
      </div>
      <script type = "text/javascript">
         var vm = new Vue({
            el: '#computed_props',
            data: {
               firstName : "Terry",
               lastName : "Ben"
            },
            methods: {
            },
            computed :{
               fullname : {
                  get : function() {
                     return this.firstName+" "+this.lastName;
                  }
               }
            }
         });
      </script>
   </body>
</html>

바인딩 된 하나의 입력 상자를 정의했습니다. fullname, 계산 된 속성입니다. 호출 된 함수를 반환합니다.get, 전체 이름, 즉 이름과 성을 제공합니다. 또한 이름과 성을 다음과 같이 표시했습니다.

<h1>{{firstName}}</h1>
<h1>{{lastName}}</h1>

브라우저에서 똑같이 확인합시다.

이제 텍스트 상자에서 이름을 변경하면 다음 스크린 샷에 표시된 이름에 동일한 내용이 반영되지 않는 것을 볼 수 있습니다.

fullname 계산 속성에 setter 함수를 추가해 보겠습니다.

<html>
   <head>
      <title>VueJs Instance</title>
      <script type = "text/javascript" src = "js/vue.js"></script>
   </head>
   <body>
      <div id = "computed_props">
         <input type = "text" v-model = "fullname" />
         <h1>{{firstName}}</h1>
         <h1>{{lastName}}</h1>
      </div>
      <script type = "text/javascript">
         var vm = new Vue({
            el: '#computed_props',
            data: {
               firstName : "Terry",
               lastName : "Ben"
            },
            methods: {
            },
            computed :{
               fullname : {
                  get : function() {
                     return this.firstName+" "+this.lastName;
                  },
                  set : function(name) {
                     var fname = name.split(" ");
                     this.firstName = fname[0];
                     this.lastName = fname[1]
                  }
               }
            }
         });
      </script>
   </body>
</html>

fullname 계산 속성에 set 함수를 추가했습니다.

computed :{
   fullname : {
      get : function() {
         return this.firstName+" "+this.lastName;
      },
      set : function(name) {
         var fname = name.split(" ");
         this.firstName = fname[0];
         this.lastName = fname[1]
      }
   }
}

매개 변수로 이름이 있으며 텍스트 상자의 전체 이름입니다. 나중에 공간으로 분할되고 이름과 성이 업데이트됩니다. 이제 코드를 실행하고 텍스트 상자를 편집하면 브라우저에 동일한 내용이 표시됩니다. set 함수로 인해 성과 이름이 업데이트됩니다. get 함수는 이름과 성을 반환하고 set 함수는 편집 된 것이 있으면이를 업데이트합니다.

이제 텍스트 상자에 입력 한 내용은 위의 스크린 샷에 표시된 내용과 일치합니다.