Computed property trong Vue.js

Tiếp tục serial bài viết về học vuejs chúng ta sẽ đi tìm hiểu về 1 thuật ngữ nữa trong Vuejs đó là Computed property. Sở dĩ mình ko Việt hóa  từ này vì không đúng ngữ cảnh của Vuejs. Nào bắt tay vào tìm hiểu cùng mình nhé các bạn!

Computed property là gì?

Computed property trong Vuejs thể hiện dưới dạng một phương thức hoặc một đối tượng (object) chứa các 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. Khi bạn gọi một computed property thì bạn sẽ gọi nó như một thuộc tính bình thường. Và khi đó các hành động trong computed property sẽ được thực thi. Ngoài ra chúng ta cũng có thể cho rằng Computed Properties là những hàm (methods) sử dụng để xử lý dữ liệu hiển thị lên template nhưng tối ưu hơn methods kết quả của nó sẽ được lưu trữ (Cache) và chỉ cập nhật khi cần thiết.

Một điều rất dễ nhận thấy đó là expression ở trong template tiện lợi, thế nhưng 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ì lại khác template của bạn sẽ cồng kềnh và trở nên khó hiểu đối với chính bản thân bạn.

Ví dụ dưới đây đảo ngược 1 đoạn text không sử dụng Computed property

<div id="app">
    <h5 class="text-green">{{ name.split('').reverse().join('') }}</h5>
</div>
<script  type="text/javascript"></script>
<script type="text/javascript">
    var app = new Vue({
        el: '#app',
        data: {
            name: 'Dao Duy Nam'
        }
    });
</script>

Chạy Code kết quả như sau

Bạn có thấy nó rối không? Thực ra đoạn code nhỏ sẽ không rối cho lắm thế nhưng đoạn code lớn thì lại hoàn toàn khá. Hơn nữa nếu bạn muốn sử dụng code này vào một thời điểm khác ở trong 1 ứng dụng Vue khác thì đây là lúc Computed property  phát huy hiệu quả của nó. Có thể coi Computed property giống như function của C,C++ vậy.

2. Cú Pháp Computed property

Cú pháp để khai báo computed property trong Vue.js khá đơn giản chúng ta chỉ cần đặt nó ở trong key computed nhé các bạn, giống như mọi data ta đều đặt trong key data.

VD: Mình sẽ khai báo một computed chuyển đổi biến name trong data scope (phạm vi data) thành in hoa.

var app = new Vue({
    el: '#app',
    data: {
        name: 'dao duy nam'
    },
    computed : {
        convertToUpper: function (){
            return this.name.toUpperCase();
        }
    }
});

Lúc này đoạn code

<div id="app">
<h5 class="text-green">{{ name.split('').reverse().join('') }}</h5>
</div>

Sẽ chỉ còn ngắn gọn như sau:

<div id="app">
    <h1 class="text-red">{{ convertToUpper }}</h1>
</div>

Test kết quả:

Nếu như trong 1 vài trường hợp nào đó bạn muốn sử dụng computed property ở ngoài vue instance thì bạn chỉ cần truy xuất theo cú pháp nameObject.property.

Computed và Methods

Đến đây có lẽ bạn sẽ tự nhủ chỉ đơn giản như những thứ nêu ở trên thì method cũng có thể làm được? Điều đó hoàn toàn đúng, chúng ta có thể chuyển convertToUpper computed trên thành methods như sau:

Không có gì bất ngờ kết quả cũng không có gì khác nhau, vậy tại sao trời sinh methods còn sinh computed. Câu trả lời là do methods 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 do đó sử dụng computed được coi là tiết kiệm thời gian và băng thông hơn.

Computed getter và setter

Theo mặc định mỗi computed sẽ có hai phương thức đó là getter và setter, 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

VD: Các viết computed convertToUpper ở trên tương đương với với cách sau:

var app = new Vue({
    el: '#app',
    data: {
        name: 'Dao Duy Nam'
    },
    computed : {
        convertToUpper: {
            get : function () {
                return this.name.toUpperCase();
            }
        }
    }
});

Khai báo setter

Chúng ta cũng có thể khai báo setter cho các computed bằng cách tạo thêm một set function bên trong computer.

Ví dụ khai báo

var app = new Vue({
    el: '#app',
    data: {
        name: 'Dao Duy Nam'
    },
    computed : {
        convertToUpper: {
            get : function () {
                return this.name.toUpperCase();
            },
            set: function (name) {
                this.name = name;
            }
        }
    }
});

Để xem cách hoạt động thì các bạn chỉ cần gán giá trị cho computer là biết.

VD: Sử dụng khai báo setter

var app = new Vue({
    el: '#app',
    data: {
        name: 'Dao Duy Nam' //giá trị ban đầu.
    },
    computed : {
        convertToUpper: {
            get : function () {
                return this.name.toUpperCase();
            },
            set: function (name) {
                this.name = name;
            }
        }
    }
});
//thiết lập lại giá trị
app.convertToUpper = "Hoc Vuejs tại Học TV";

Kết quả như sau:

Có thể thấy Computer property  khá hay phải không các bạn. Trong bài này chủ yếu chúng ta phải phân biệt được khi nào thì dùng computed và khi nào thì dùng methods. Cụ thể 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.