Computed, Watcher và Filter trong Vue.js

Bài đăng này đã không được cập nhật trong 5 năm

Computed Properties

Computed là gì? Mình xin lấy ví dụ trước, sau đó sẽ giải thích về cái này. Quay lại ví dụ hôm trước như sau. Trong file index.html

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title>Getting Started with Vuejs</title>
</head>
<body>
    <div id="app">
        <p>{{ message }}</p>
    </div>
</body>
<script type="text/javascript" src="app.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue"></script>
</html>

app.js :

var app = new Vue({
    el: '#app',
    data: {
      message: 'Hello World!'
    }
})

Chạy thử và kết quả là : Hello World! Nhưng mà không phải lúc nào dữ liệu bản hiển thị ra cũng được đẹp, và đơn giản như vậy. Ví dụ như giờ mình không muốn là Hello World! nữa, mình muốn viết hoa các chữ cái của nó thì sao. Vào html sửa lại luôn như vậy

<div id="app">
    <p>{{ message.toUpperCase() }}</p>
</div>

Kết quả thì vẫn đúng nhưng nhìn code có vẻ xù xì hơn. Nếu biểu thức càng phức tạp thì xử lý càng cồng kềnh. Giờ ta sẽ dùng Computed để xử lý:

var app = new Vue({
    el: '#app',
    data: {
      message:'Hello World!'
    },
    computed: {
      upperMessage: function () {
        return this.message.toUpperCase();
    }
  }
});

Bên trong file Html, ta sửa lại như sau:

<div id="app">
    <p>{{ message }}</p>
    Message sau khi dùng computed : "{{ upperMessage }}"
</div>

So sánh 2 cách các bạn sẽ thấy 1 bên sẽ xử lý thẳng tại html. còn 1 bên sẽ xử lý trong Vue.js. Cách một sẽ làm cho template không đơn giản và mang tính khai báo nữa. Bạn sẽ phải mất chút thời gian thì mới nhận ra được message đã bị biến đổi. Càng tệ hơn khi bạn sử dụng như vậy nhiều lần trong code. Một điều đáng chú ý nữa là computed property được cache lại dựa vào những những thành phần phụ thuộc (dependency). Một computed property chỉ được tính toán lại khi những thành phần phụ thuộc của chúng thay đổi. Điều này có nghĩa: miễn là giá trị của message không thay đổi, thì những truy cập tới computed upperMessage sẽ ngay lập tức trả về kết quả được tính toán trước đó mà không phải chạy lại hàm một lần nữa. Như vậy sẽ làm tối ưu hiệu suất của chương trình.

Watcher

Ví dụ: File html:

<div id="app">
  <input type=text v-model="name"/>
  <p>{{ name }}</p>
</div>

file js:

var app = new Vue({
   el: '#app',
   data: {
       name: 'Nguyen Van Vu'
   },
   watch: {
       name : function () {
           alert(this.name);
       }
   }
});

Chú ý là tên của watcher phải trùng với tên data cùng theo dõi. Của mình ở đây là name. Các bạn có thể Xem Tại Đây Vậy watcher trong Vue.js đúng như nghĩa của nó, có nghĩa là theo dõi, nó có nhiệm vụ theo dõi sự thay đổi của dữ liệu và thực thi hành động kèm theo.

Filters

Một phần nữa mình thấy khá thú vị đó là Filters. Vue cho phép bạn định nghĩa các filters (bộ lọc) dùng để áp dụng các định dạng văn bản thường gặp. Ví dụ: File html:

 <div id="app">
  <input type="text" v-model="name"/>
  <p>{{ name | afterChange() }}</p>
</div>

File js:

var app = new Vue({
  el: '#app',
  data: {
      name: 'Khen tôi đẹp trai đi nào!!'
  },
  filters: {
  	afterChange: function(value) {
   	return value.toUpperCase();
   }
  }
});

Hàm filters luôn nhận giá trị đầu tiên của biểu thức. Sau đó lọc qua giá trị thứ 2, rồi thứ 3... Giá trị thứ 2 sẽ nhận kết quả của giá trị thứ nhất. Các giá trị sau cũng tương tự như vậy. Các bạn có thể theo dõi ví dụ tại đây Filters trong Vue.js

Kết Luận

Trong các dự án, Computed, Watcher và Filters là những công cụ rất cần thiết cho các lập trình viên. Hi vọng các bạn có thể hiểu được và áp dụng vào các tình huống khi cần. Mình xin dừng bài viết ở đây. Cảm ơn các bạn đã theo dõi.!

Computed Properties

Watcher

Filters

Kết Luận

Mục lục