Vue: kiểm soát thay đổi của data với Watch

Hi các bạn,

Ở một số case, có thể ta sẽ cẩn kiểm soát sự thay đổi của data nào đó trong Vue component của chúng ta. Và đừng lo, Vue Watch sẽ giúp bạn thực hiện điều đó rất đơn giản.

Với Vue Watch, mỗi khi data của chúng ta có thay đổi, nó sẽ thực hiện action nhất định mà chúng ta đã define ra.

Mình sẽ ghi rõ hướng dẫn bên dưới luôn nhé 😀

1/ Define Vue Watch

Để define ra 1 watcher cho data nào đó của bạn, tất cả ta sẽ define trong property watch này ở Vue instance/component của bạn:

watch: {
	// define your watcher here
}

2/ Vue Watch – Data cơ bản

Với các data cơ bản như Number, String,… để watch, ta sẽ define method như sau:

data() {
	return {
		number: 1,
		string: "abc",
	}
}
watch: {
	number(newData) { // es6 syntax
		// define your action here when this data changed
	},
	string: function(newData) { // es5 syntax
		// define your action here when this data changed 
	}
}

Khi mỗi lần 2 biến number, string có thay đổi, hàm tương xứng của nó trong watch sẽ được chạy 😀

Trong watcher của bạn, bạn có thể access/call hàm trong methods thoải mái thông qua this nhé 😀

3/ Vue Watch – Watch một phần tử trong 1 Object

Ví dụ mình có 1 data như sau trong 1 object:

object: {
	text: "abc",
}

Để watch được, ta sẽ define watcher như sau:

watch: {
	"object.text": function(newData) {
		// your method here...
	}
}

4/ Vue Watch – Watch toàn bộ thay đổi trong object/array

Tất nhiên là trong object hay array của chúng ta, việc nó go-deep down là chuyện bình thường nhỉ, tận 2 cấp, 3 cấp,…

Và các bạn đừng lo, Vue cũng hỗ trợ hết :D, define như sau:

watch: {
	object: {
		handle(newData) {
			// your method here...
		},
		deep: true, // deep watch
	}
}

Vậy mỗi data bất kì trong object/array đó thay đổi, watcher của bạn sẽ trigger 😀

5/ Kết luận

Watcher rất hữu dụng khi ta dùng để kiểm soát cũng như quản lý sự thay đổi của data của chúng ta.

Watcher có thể apply cho cả data và prop.

Lưu ý nhỏ: ở 1 số trường hợp, watcher nó sẽ chạy liên tục gây đơ browser của bạn. Để tránh việc đó, ta nên code 1 hàm tại methods và sử dụng debounce của underscore (debounce hỗ trợ ta chỉ chạy hàm trong 1 thời gian nhất định).

Tham khảo debounce tại: https://underscorejs.org/#debounce

Tham khảo thêm Watcher tại: https://vuejs.org/v2/guide/computed.html#Computed-vs-Watched-Property

Các bài VueJS cũ tại blog: https://sethphat.com/sp-category/lap-trinh/vuejs

Cám ơn các bạn đã theo dõi!