Trang chủTác giảLiên hệ

How VueJS works: An overview of core components

By Phùng Thế Hoàng
Published in Javascript
June 09, 2021
2 min read

Trước khi đi vào tìm hiểu các thành phần core của VueJS thì chúng ta cần phải hiểu được khái niệm Virtual DOM.

Chúng ta biết rằng để thao tác được với các thẻ HTML bằng Javascript thì phải thông qua một cơ chế ta gọi là DOM (Document Object Model) tạm dịch ra là mô hình các đối tượng trong tài liệu HTML. Mỗi thẻ HTML sẽ có những thuộc tính (Properties) và có phân cấp cha con với các thẻ HTML khác. Sự phân cấp và các thuộc tính của thẻ HTML này ta gọi là selector và trong DOM sẽ có nhiệm vụ xử lý các vấn đề như đổi thuộc tính của thẻ, đổi cấu trúc HTML của thẻ …

alt text

Ví dụ chúng ta muốn đổi textContent của thẻ h1 bằng Javascript thì chúng ta sẽ làm như sau:

Nhưng trong một ứng dụng web thông thường có cả nghìn nodes phân cấp cha con rất sâu khiến cho việc tìm kiếm và update cấu trúc mất nhiều thời gian. Thế là Virtual DOM ra đời. Virtual DOM thực chất chỉ là một cách biểu diễn những thẻ html (actual DOM) thông qua những Javascript Object. Như ví dụ dưới đây ta thấy VueJS đã biểu diễn thẻ div như là một Javascript Object. Ở giai đoạn mount, Vue sẽ lấy các JS Object này để tạo ra các actual node và append chúng vào document.

alt text

Chúng ta có thể coi Virtual DOM giống như là một bản vẽ (blueprints) của actual DOM. Giả sử actual DOM giống như một tòa building 100 tầng, khi ta muốn thay đổi bố cục của tầng 29 thì sẽ có hai cách. Cách 1 là phá hết mọi thử ở tầng 29 và xây lại từ đầu, cách 2 là sẽ tạo ra một blueprints mới và so sánh vs blueprints cũ xem thay đổi chỗ nào thì sửa chỗ đó (đó cũng là cách Vue update DOM). Giờ chúng ta cùng tìm hiểu các thành phần core trong VueJS.

VueJS được tạo nên bởi 3 thành phần chính:

Reactivity Module: Cho phép chúng ta tạo ra các reactive object. Khi mà thay đổi các object này thì view sẽ ngay lập tức cập nhật những thay đổi đó lên view và ngược lại hay chúng ta thường gọi là two ways data binding. Compiler Module: Module này sẽ có trách nhiệm biên dịch những đoạn mã html trong template thành Render Functions. Qúa trình này thường diễn ra lúc build project. Ở hình minh họa phía trên thực ra Vue sẽ không biến đổi trực tiếp những đoạn mã html thành Virtual Node ngay mà phải thông qua một bước nữa, biến đổi những đoạn mã html thành những Render Functions sau đó ở giai đoạn render thì Vue mới biến đổi Render Funcstion thành những Virtual DOM như hình minh họa phía dưới. alt text Renderer Module: Module này sẽ có nhiệm vụ create những Virtual Nodes và mount chúng vào document và update khi có thay đổi. Cụ thể ở module này sẽ gồm có 3 phase:

  • Render Phase: Như đã nói ở trên thì phase này sẽ sinh ra virtual DOM từ những Render Functions. alt text
  • Mount Phase: Ở giai đoạn này Vue sẽ sinh ra actual DOM từ virtual DOM rồi append chúng vào document. alt text
  • Patch Phase: Mỗi khi data thay đổi cần update UI thì Vue sẽ ko trực tiếp update vào actual DOM mà sẽ tạo ra một Virtual DOM mới. Ở phase này Vue sẽ so sánh Virtual DOM mới này vs Virtual DOM cũ và thực hiện update những thay đổi cần thiết.

alt text

Tham khảo: https://www.vuemastery.com/courses/vue3-deep-dive-with-evan-you/vue3-overview


Phùng Thế Hoàng

Developer

Related Posts

Javascript
NestJS for Beginners (Part 2)
August 09, 2021
1 min
© 2021, All Rights Reserved.

Quick Links

Liên hệ quảng cáoThông tinLiên hệ

Social Media