VueJS – Computed Properties

Chúng ta đã tìm hiểu về methods trong Vue instancecomponents. Bài này chúng ta sẽ tìm hiểu 1 property của Vue đó là Computed. Computed properties cũng giống methods nhưng có một số khác biệt, chúng ta sẽ tìm hiểu.

Ví dụ

<html>
   <head>
      <title>VueJs Instance</title>
      <script type = "text/javascript" src = "https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/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>

js/vue_computeprops.js

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

Chúng ta tạo file html firstnamelastname, dữ liệu này được gán hai chiều với textbox FirstNameLastname.

Phương thức getfullname của computed return firstnamelastname.

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

Khi nhập dữ liệu vào textbox, dữ liệu của firstnamelastname cũng thay đổi theo, và kết quả getfullname cũng thay đổi theo. Như vậy nó khác với method ở điểm nào?

Ví dụ

<html>
   <head>
      <title>VueJs Instance</title>
      <script type = "text/javascript" src = "https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/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>

Chúng ta tạo method getrandomno1 và computed là getrandomno cả 2 đều có Math.random().

Chúng ta xem kết quả được hiển thị bên dưới.

Chúng ta thấy với computed, kết quả ở những lần gọi khác nhau đều có giá trị giống nhau. Đối với computed kết quả được lưu vào cache, nó chỉ thực hiện việc tính lại khi dữ liệu vào nó thay đổi.

Get/Set trong Computed

get/set là 2 function trong computed properties.

<html>
   <head>
      <title>VueJs Instance</title>
      <script type = "text/javascript" src = "https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/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>

Chúng ta tạo 1 input để thay đổi giá trị fullname. Và phương thức get trong fullname sẽ return về Fullname. Chúng ta sẽ hiển thị firstnamelastname ra màn hình.

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

Kết quả.

Nếu chúng ta thay đổi giá trị trong input fullname kết quả firstNamelastName vẫn không đổi.

Bây giờ bạn thêm phương thức setter vào fullname của computed property.

<html>
   <head>
      <title>VueJs Instance</title>
      <script type = "text/javascript" src = "https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/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>

Trong phương thức set này, nhận tham số name cũng chính là giá trị của fullname của textbox. Sau khi cắt tại vị trí khoản trắng, nó sẽ thay đổi giá trị của firstNamelastName.

Chạy lại ví dụ trên, chúng ta sẽ thấy sự thay đổi.