1. Hãy dành vài giây Đăng nhập hoặc Đăng ký tài khoản để truy cập và sử dụng TBit hiệu quả nhất.
    Ẩn thông báo
  2. Bạn hãy like trang Facebook của TBit để nhận được tin tức công nghệ nhanh nhất từ chúng tôi.
    Ẩn thông báo

VueJS Bài 6: Computed Properties

Thảo luận trong 'JavaScript' bắt đầu bởi Phạm Đạt, 10/7/18.

0/5, 0 phiếu

    1. Phạm Đạt TBit-Mod

      Hôm nay chúng ta sẽ cùng nhau đi bài tiếp theo trong series bài học VueJS. Và đặc biệt chúng ta sẽ cùng nhau tìm hiểu về Computed Properties từ này như là một thuật ngữ trong VueJS luôn nhé ví dịch sang tiếng Việt thì mình chịu, không biết lẫy nghĩa như thế nào để các bạn hiểu. Tuy nhiên nó nôm na là những hàm (methods) sử dụng để xử lý dữ liệu hiển thị lên template, kết quả của nó sẽ được lưu trữ (Cache) và chỉ cập nhật khi cần thiết. Ngoài ra ta cũng có thể xem computed là những phương thức setter và getter dùng để thiết lập dữ liệu và lấy dữ liệu đưa ra template.

      [​IMG]

      1. Computed Properties
      Chúng ta có rất nhiều cách để hiển thị dữ liệu ra View như: Sử dụng expression, sử dụng filters, sử dụng các directly binding. Ngoài các cách đó ra thì chúng ta cũng có thể sử dụng computed properties để xử lý hiển thị dữ liệu hoặc thiết lập giá trị dữ liệu trong model.

      Các expression ở trong template rất là tiện lợi, tuy nhiên nó chỉ tiện cho các phép toán đơn giản, nếu bạn gặp phải những phép toán phức tạp thì nhìn vào template của bạn sẽ cồng kềnh và khó hiểu.

      Ví dụ: Hiển thị đảo ngược giá trị của message, đây là ví dụ khá hay từ trang chủ của VueJS thể hiện sự rườm rà khi sử dụng expression quá phức tạp trong template.

      HTML:
      1.     Giá trị ban đầu: "{{ message }}"
      2.     Giá trị sau khi chuyển đổi: "{{ message.split('').reverse().join('') }}"
      3.  
      4.     var vm = new Vue({
      5.         el: '#example',
      6.         data: {
      7.             message: 'Chào mừng đến với tbit.vn'
      8.         }
      9.     });
      10.  

      Nhưng nếu chúng ta sử dụng Computed thì nhìn sẽ dễ dàng hơn.

      HTML:
      1.  
      2. <div id="example">
      3.     <p>Giá trị ban đầu: "{{ message }}"</p>
      4.     <p>Giá trị sau khi chuyển đổi: "{{ reverseMessage }}"</p>
      5. </div>
      6. <script language="javascript">
      7.     var vm = new Vue({
      8.         el: '#example',
      9.         data: {
      10.             message: 'Chào mừng đến với tbit.vn'
      11.         },
      12.         computed : {
      13.             reverseMessage : function(){
      14.                 return this.message.split('').reverse().join('');
      15.             }
      16.         }
      17.     });
      Như vậy tất cả các computed sẽ được đặt trong key computed nhé các bạn, giống như mọi data ta đều đặt trong key data.

      2. Computed và Methods
      Như ở ví dụ trên ta hoàn toàn có thể thay thế computed bằng methods như sau:

      HTML:
      1. <div id="example">
      2.     <p>Giá trị ban đầu: "{{ message }}"</p>
      3.     <p>Giá trị sau khi chuyển đổi: "{{ reverseMessage() }}"</p>
      4. </div>
      5. <script language="javascript">
      6.     var vm = new Vue({
      7.         el: '#example',
      8.         data: {
      9.             message: 'Chào mừng đến với tbit.vn'
      10.         },
      11.         methods : {
      12.             reverseMessage : function(){
      13.                 return this.message.split('').reverse().join('');
      14.             }
      15.         }
      16.     });
      Kết quả cũng không có gì khác nhau, vậy tại sao chúng ta lại dùng computed thay vì dùng methods? Câu trả lời sẽ phụ thuộc vào ý đồ của bạn. Như ở bài methods mình có trình bày đặc điểm chung của nó đó là không được cached, vì vậy mỗi khi bạn gọi một method thì nó sẽ tính toán lại từ đầu. Còn đối với computed thì khác, kết quả của các computed sẽ được cached và chỉ cập nhật khi dư liệu thay đổi.

      Giả sử mình có chương trình như sau, đây là chương trình chuyển từ số thành chữ:

      HTML:
      1. <div id="example">
      2.     <p>Number: "{{ number }}"</p>
      3.     <p>Number To Word: "{{ showNumberWord }}"</p>
      4. </div>
      5.  
      6. <script language="javascript">
      7.     var vm = new Vue({
      8.         el: '#example',
      9.         data: {
      10.             number : "12345"
      11.         },
      12.         computed : {
      13.             showNumberWord : function(){
      14.                 console.log("Có gọi");
      15.                 var message = "";
      16.                 for (var i = 0; i < this.number.length; i++){
      17.                     if (this.number[i] == "1"){
      18.                         message += "Một ";
      19.                     }
      20.                     else if (this.number[i] == "2"){
      21.                         message += "Hai ";
      22.                     }
      23.                     else if (this.number[i] == "3"){
      24.                         message += "Ba ";
      25.                     }
      26.                     else if (this.number[i] == "4"){
      27.                         message += "Bốn ";
      28.                     }
      29.                     else if (this.number[i] == "5"){
      30.                         message += "Năm ";
      31.                     }
      32.                     else if (this.number[i] == "6"){
      33.                         message += "Sáu ";
      34.                     }
      35.                     else if (this.number[i] == "7"){
      36.                         message += "Bảy ";
      37.                     }
      38.                     else if (this.number[i] == "8"){
      39.                         message += "Tám ";
      40.                     }
      41.                     else if (this.number[i] == "9"){
      42.                         message += "Chín ";
      43.                     }
      44.                     else if (this.number[i] == "0"){
      45.                         message += "Không ";
      46.                     }
      47.                 }
      48.                 return message;
      49.             }
      50.         }
      51.     });
      Bạn chú ý là mình có bổ sung đoạn code console.log("Có gọi"); để kiểm tra là computed đó sẽ được gọi bao nhiêu lần. Bây giờ mình sẽ sửa lại ở template như sau:

      Code
      1
      2
      3
      4
      5
      <div id="example">
      <p>Number: "{{ number }}"</p>
      <p>Number To Word: "{{ showNumberWord }}"</p>
      <p>Number To Word: "{{ showNumberWord }}"</p>
      </div>

      Nếu theo đúng nguyên tắc của methods thì sẽ có hai tin thông báo "Có gọi", tuy nhiên do đây là một computed nên kết quả ở lần gọi thứ hai được cached nên không có xuất hiện thông báo đó (bạn có thể chạy và check bằng console.log nhé !).

      3. Computed setter và getter
      Mặc định mỗi computed sẽ có hai phương thức đó là gettersetter, nếu bạn không khai báo thì mặc định nó sẽ hiểu là bạn đang sử dụng getter, vì vậy cuối mỗi computed luôn có lệnh return.
      • Getter mặc định
      HTML:
      1. <div id="example">
      2.     <p>Message: "{{ message }}"</p>
      3.     <p>Uppercase Message: "{{ uppercaseMessage }}"</p>
      4. </div>
      5.  
      6. <script language="javascript">
      7.     var vm = new Vue({
      8.         el: '#example',
      9.         data: {
      10.             message : "Học VueJS tại tbit.vn"
      11.         },
      12.         computed : {
      13.             uppercaseMessage : function(){
      14.                 // mặc định Vue sẽ hiểu đây là getter nên phải có return
      15.                 return "[ " + this.message.toUpperCase() + " ]";
      16.             }
      17.         }
      18.     });
      • Khai báo getter
      Hoặc bạn cũng có thể sử dụng cú pháp khai báo getter như sau (kết quả bên template cũng không có gì thay đổi):

      Mã (Text):
      1. var vm = new Vue({
      2.     el: '#example',
      3.     data: {
      4.         message : "Học VueJS tại tbit.vn"
      5.     },
      6.     computed : {
      7.         uppercaseMessage : {
      8.             // Khai báo getter
      9.             get : function(){
      10.                 return "[ " + this.message.toUpperCase() + " ]";
      11.             }
      12.         }
      13.     }
      14. });
      • Khai báo setter
      Nếu bạn muốn khai báo setter thì viết như sau:

      HTML:
      1. var vm = new Vue({
      2.     el: '#example',
      3.     data: {
      4.         message : "Học VueJS tại tbit.vn"
      5.     },
      6.     computed : {
      7.         uppercaseMessage : {
      8.             // Khai báo getter
      9.             get : function(){
      10.                 return "[ " + this.message.toUpperCase() + " ]";
      11.             },
      12.  
      13.             // Khai báo setter
      14.             set : function(newValue){
      15.                 this.message = newValue.toLowerCase();
      16.             }
      17.         }
      18.     }
      19. });
      20.  
      21. // Mỗi khi ta thiết lập giá trị cho uppercaseMessage thì message sẽ bị thay đổi
      22. // vì nội dung của hàm setter là this.message = newValue.toLowerCase();
      23. vm.uppercaseMessage = "PHẠM ĐẠT";
      24.  
      25. console.log(vm.message);
      Bạn chú ý phần này nhé vì nó hơi khó hiểu. Mỗi khi bạn chạy vm.uppercaseMessage = "giá trị mới"; thì hàm setter sẽ được gọi nên giá trị của message cũng thay đổi theo.

      4. Tạm kết
      Computer khá hay phải không các bạn. Chủ yếu trong bài này bạn phải phân biệt được khi nào thì dùng computed và khi nào thì dùng methods như sau: Nếu một chức năng bạn muốn mỗi khi gọi nó sẽ chạy lại từ đầu thì bạn sẽ dùng methods, còn bạn muốn không cần chạy lại cho tới khi dữ liệu bị thay đổi thì hãy dùng computed.

      * Tài liệu tham khảo:
      https://vuejs.org/
      https://www.google.com.vn/
       
      Đang tải...

Chia sẻ trang này

Đang tải...