Vuejs Render Process bao gồm những bước nào?

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

Tuần trước đã có bài viết về nextTick() trong Vuejs, nhân đây muốn giới thiệu qua cho anh em luôn về Vuejs Render Process. Hiểu process của Vue mới nâng tầm lên được. Chứ cứ v-if, v-else, v-show hoài mà không biết nó render như thế nào thì toang.

Sẵn sàng chưa nào?. Xúc ngay và luôn cho nóng nha!

1. Virtual DOM

Trước khi tìm hiểu về Vuejs Render Process, bắt buộc phải có kiến thức về DOM (Document Object Model). Anh em nào chưa biết có thể tìm hiểu qua bài viết này. Trước đây khi có thay đổi phía FE, một node trên DOM tree thay đổi sẽ kéo theo phải render lại toàn bộ tree.

Việc thay đổi trên toàn bộ cây DOM thật sự tệ. Chính vì vậy, Virutal DOM ra đời.

Tóm tắt nhanh như tốc độ crush tỏ tình như sau:

• Virtual DOM giúp tăng perfomance khi thực hiện thay đổi trên screen
• Luôn có sự so sánh những gì thay đổi giữa VirtualDOM và DOM trước khi cập nhật.
• Virtual DOM được sử dụng cho các dự án sử dụng Vuejs

Thực chất, khi run build Vuejs Application

2. Vuejs Render Process

Cả một quá trình dài trước khi Virtual DOM được sinh ra và phản ánh lên DOM thật. Quá trình này bao gồm 4 bước (nói rõ ra thì Vuejs Render Process) bao gồm 4 bước chính. Để hiểu rõ hơn về quá trình render, bắt buộc phải nhớ kĩ các step đó như sau:

4 bước render process của Vuejs nằm ở đây.
Nguồn / Source: Medium

2.1 defineProperty

Bắt đầu một process dài cập nhật lên DOM tree luôn là defineProperty. Ở step này, một khi dữ liệu được cập nhật và xác nhận là có thay đổi, method defineProperty sẽ được goi.

Về mặt bản chất, defineProperty có vai trò như người thông báo. Nó luôn lắng nghe cho mỗi lần data thay đổi, thông báo tới watcher sự thay đổi về data tại component.

Dữ liệu A thay đổi -> defineProperty gọi function setter -> thông báo cho watcher.

Rõ ràng mà nói, step đầu tiên trong Vuejs Render Process là defineProperty, việc xác định được data nào thay đổi báo cho watcher là bước đi vô cùng quan trọng

2.2 Watcher

Watcher được khởi tạo cho từng component trên Vue, ngay lúc application được khởi tạo. Nhiệm vụ chính của watcher là cập nhật DOM và Virtual DOM. Tuy nhiên, Watcher chỉ update cây DOM tạm thời (immediately) sau khi setter thông báo cho nó biết.

2.3 Queue

Khi thằng watcher nhận được thông báo thay đổi, nó tự đưa nó vào một hàng đợi (Queue). Nguyên nhân là có nhiều data thay đổi cùng lúc. Để xử lý được hết cần đẩy vào hàng đợi (để xử lý từ từ).

Nếu cả title và message trên component được update data cùng lúc (sau khi gọi API thành công). Vue Watcher sẽ đẩy từng thay đổi đó vào Queue (thứ tự order theo các điều kiện đặc biệt)

2.4 nextTick

Cuối cùng là nextTick API (bạn nào chưa biết có thể tham khảo bài viết này). nextTick giúp consumed and flushed (dịch tạm là chấp nhận và đẩy ra) cây DOM thật. Mỗi watcher sẽ được cập nhật lên DOM thật từ Virtual DOM. Đây cũng là cách là phương thức watch trong Vuejs hoạt động.

Việc cập nhật từ Virtual DOM lên DOM được thực hiện tự động bởi Vue qua method run(). Tuy nhiên, cũng có thể tự gọi function này khi muốn cập nhật DOM ngay lập tức.

3. Kết luận

Tóm lại, Vuejs Render Process chỉ tóm gọn lại trong bức hình dưới đây. Mỗi quá trình đều có một chức năng và nhiệm vụ khác nhau. Tuy nhiên, chỉ đơn giản nhớ rằng:

• data thay đổi -> gọi defineProperty -> báo cho watcher cái gì đã thay đổi
• watcher trên từng component được tạo -> nếu có nhiều watcher -> đẩy vào queue
• Lần lượt từng Queue gọi nextTick() API -> cập nhật lên DOM

Qua bài viết này, mong rằng các vị huynh đài có cái nhìn khách quan và rõ ràng hơn về Vuejs Render Process. Để làm việc, code được với Vuejs thì không cần hiểu tới render process. Nhưng để trở thành master, được gọi là Senior thì cần nắm rõ kiến thức này.

Ngoài hiểu sâu để nhớ lâu, những thông tin bài viết cũng cấp còn giúp fix những bug quái lạ khi làm việc. Biết khi nào nên set data thay đổi, khi nào nên cập nhật Virtual DOM lên DOM.

Chả liên quan gì nhưng thấy process nào cũng hay!

4. Tham khảo

• Understanding Rendering Process with Virtual DOM In Vue.js
• Virtual DOM and Internals

Hết rồi. 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:

• Những ứng dụng tuyệt vời của Renderless component trong Vue
• Distributed Data Processing using MapReduce
• Load Balancers II – Determine which servers processes a request

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