Vuejs NextTick là gì? – sử dụng khi nào?

Bài viết được sự cho phép của tác giả Kiên Nguyễn

Nay rảnh rỗi lướt Medium thấy có bài viết rất hay về Vuejs NextTick. Tiện đang code project trên công ty bằng Vuejs. Vietsub luôn cho anh em cùng tìm hiểu, trao đổi.

Năm nay dự là Vuejs hot khỏi bàn rồi. Bỏ xa AngularJs với đe dọa ngôi vương của ReactJs sớm thôi.

Vuejs năm nay dự rất HOT. Nhiều sao lắm rồi. Anh em nên “try hard” học thử

Thật sự thì Vuejs NextTick là gì?. Lúc nào nên sử dụng NextTick?. Có khác biệt gì với setTimeout hay setImmediate không?

Tuốt tuồn tuột được giải thích qua bài viết dưới đây.

1. Khái niệm

Theo như tài liệu ở trang chủ của Vuejs thì NextTick sinh ra để làm hai việc sau:

Defer the callback to be executed after the next DOM update cycle

Định nghĩa một function callback thực thi sau khi DOM kết thúc một cycle update.

Bạn nào chưa biết hoặc chưa nắm rõ về DOM (Document Object Model) có thể tham khảo qua bài viết – Browser đã render website như thế nào?. Hứa là đọc phát hiểu ngay DOM là cái vẹo gì?.

Ngoài ra, NextTick còn có thể được sử dụng để gọi ngay tức thời khi “vừa mới cập nhật data, nhưng chưa phản ánh thay đổi đó lên DOM“

Use it immediately after you’ve changed some data to wait for the DOM update

Sử dụng ngay tức thời sau khi vừa thay đổi data, đang chờ để cập nhật lên DOM

2. Ví dụ

// Cú pháp đơn giản, callback function và context truyền vào.
Vue.nextTick([callback, context])

Vuejs NextTick cũng được sử dụng bất đồng bộ.

// Edit data in here
vm.msg = 'Hello'
// Data is change, but the DOM not updated
Vue.nextTick(function () {
// DOM updated
}

Promise, Async và Await sử dụng như sau:

// Promise with async await
Vue.nextTick()
.then(function () {
// DOM updated
})

Ờ, thì cũng hiểu sơ sơ rồi đấy. Nhưng mà sinh ra cái NextTick() này làm chi vậy?.

Đây, có ngay đây

3. Tại sao lại cần Vuejs NextTick?

3.1 Function đầu tiên sử dụng nextTick()

Xin lỗi, hình hơi nhỏ nhưng vẫn thấy mượt mà, không hề delay. Đây là có sử dụng NextTick. Tí xem ví dụ phía dưới sẽ không sử dụng. Khác ngay.

Nguồn / Source: Medium What’s Vue.NextTick

// Create a directory
async handleFiles(fileList: FileList): Promise<void[]> {
// Việc gán giá trị cho cờ này chỉ được thực hiện sau khi các Promise được hoàn tất
this.isFileUploaded = true; 

// console.log(this.isFileUploaded) // true
await this.$nextTick(); 

const directory = await carfsModule.setupSubDirectory();
...
}

Đối với function UI upload image ở gif 1 có thể dễ thấy

• Khi người dùng click button upload, function handleFiles được gọi để thực thi
• Promise function này thực hiện tạo folder, upload files. Công việc upload tất nhiên là bất đồng bộ.
• Giá trị isFileUploaded được thay đổi giá trị để bắt sự kiện (trigger) người dùng click button upload. Trông có vẻ khá mượt mà.

3.2 Implement thứ hai không sử dụng nextTick()

Má, cái hình nhỏ dữ cha. Chiu, giờ nó thế, biết sao được. Nhưng mà thấy điểm khác giữa cái một với cái số hai chưa?

Nguồn / Source: Medium What’s Vue.NextTick

• Khi người dùng ấn button upload, UI trông như bị treo (frozen)
• Nguyên nhân là khi click button upload, giá trị this.isFileUploaded chưa hề được thay đổi -> UI không có thay đổi.
• Tệ về mặt UX (User Experience) – người dùng không biết đã thực hiện hay chưa?

Đầu tiên, khi gặp vấn đề này, hầu hết để chọn cách gán giá trị cho isFileUploaded trước khi gọi createDirectory. Nhưng sự đời trớ trêu thay, không được thế.

  // Việc gán giá trị cho cờ này chỉ được thực hiện sau khi các Promise được hoàn tất
this.isFileUploaded = true; 

// console.log(this.isFileUploaded) // false
const directory = await carfsModule.setupSubDirectory();

Nếu không có nextTick, giá trị isFileUploaded không hề thay đổi thành true -> không có cập nhật ở UI.

À, ra là thế!. Hiểu rồi ba ơi, giờ lúc nào cần cập nhật gì đó tạm tạm thì dùng Vuejs NextTick. Trường hợp đang xử lý bất đồng bộ muốn cập nhật giá trị gì gì tạm thời thì NextTick là perfect, còn không thì thôi, đừng lạm dụng mất hay.

4. Độ ưu tiên – priority

// 
setTimeout(() => {
console.log('timeout');
}, 0);

Promise.resolve().then(() => console.log('promise'));

console.log('helloworld3');

process.nextTick(() => {
console.log('nextTick');
});

console.log('helloworld5');

Output khi run đây:

helloworld3
helloworld5
nextTick
promise
timeout

Cứ in ra console là biết ông nào được ưu tiên nhiều hơn. Ở đây, ông Vuejs NextTick lúc nào cũng ưu tiên chạy trước. Bất kể là gọi ổng ở đâu trong function.

Anh em cần nhớ vì trong những đoạn code xử lý bất đồng bộ phức tạp. Nếu không biết thứ tự thực hiện nhiều khi rất là rối. Có bug cũng chẳng biết kiếm ở đâu, giải quyết thế nào?.

5. Kết luận – tham khảo

Qua bài viết này mong anh em hiểu hơn về NextTick trong Vuejs. Biết sơ nhớ tạm công dụng mục đích cũng tốt. Sau này dev có việc gì cần sẽ biết cách research.

• Vuejs V2 API – NextTick
• Nodejs process.nextTick() – nốt công tìm hiểu luôn bên Nodejs

Cảm ơn anh em đã đọc bài, nhớ like và share Facebook page nha.

Bài viết gốc được đăng tải tại kieblog.vn

Có thể bạn quan tâm:

• Vue 3 có gì mới? – What’s new from Vue 3?
• Những Vuejs concept bắt buộc phải nắm vững – Phần 1
• Vuejs Render Process bao gồm những bước nào?

Xem thêm Việc làm Developer hấp dẫn trên TopDev