Tài liệu

Một số câu hỏi thường gặp về VueJS (P.1)

avatar
Huy Erick
00:00 12/04/2024

VueJS là một framework mã nguồn mở tiên tiến để xây dựng giao diện người dùng một cách dễ dàng. Thư viện cốt lõi của VueJS tập trung vào lớp view và có khả năng...

VueJS là một framework mã nguồn mở tiên tiến để xây dựng giao diện người dùng một cách dễ dàng. Thư viện cốt lõi của VueJS tập trung vào lớp view và có khả năng tích hợp dễ dàng với các thư viện khác hoặc các dự án hiện có.

Tính năng chính của VueJS

  • Virtual DOM: VueJS sử dụng Virtual DOM, giống như các framework khác như ReactJS và Ember. Virtual DOM là một phiên bản nhẹ của DOM trong bộ nhớ và được cập nhật mà không làm ảnh hưởng đến DOM gốc.

  • Component: VueJS cho phép tạo các phần tử tùy chỉnh có thể tái sử dụng trong ứng dụng.

    Xem thêm:

  • Template: VueJS cung cấp các template dựa trên HTML kết hợp DOM với dữ liệu.

  • Định tuyến (routing): VueJS hỗ trợ điều hướng giữa các trang thông qua vue-router.

  • Nhẹ (light-weight): VueJS là một thư viện nhẹ so với các framework khác.

Lifecycle hook

Các lifecycle hook cho phép theo dõi hoạt động của thư viện mà bạn đang sử dụng. Bằng cách sử dụng các hook này, bạn có thể biết khi nào thành phần của bạn được tạo, thêm vào DOM, cập nhật hoặc bị phá hủy. Dưới đây là sơ đồ vòng đời trước khi xem chi tiết từng hook:

Khởi tạo (Creation Hooks)

  • beforeCreate: Hook này chạy khi thành phần của bạn được khởi tạo. Bạn có thể quan sát dữ liệu và các sự kiện khởi tạo trong thành phần của bạn. Tuy nhiên, dữ liệu chưa hoạt động và các sự kiện trong vòng đời của thành phần chưa được thiết lập.

  • created: Hook này được gọi sau khi Vue đã thiết lập các sự kiện và quan sát dữ liệu. Tại đây, các sự kiện đang hoạt động và quyền truy cập vào dữ liệu reactive đã được bật.

Mounting (Chèn DOM)

  • beforeMount: Hook này cho phép bạn truy cập vào thành phần ngay trước và sau khi nó được hiển thị lần đầu tiên.

  • mounted: Hook này được sử dụng thường xuyên nhất và cho phép bạn truy cập vào thành phần, mô hình pattern và DOM hiển thị (thông qua this.$el).

Cập nhật (Diff & Re-render)

  • beforeUpdate: Hook này chạy sau khi dữ liệu được thay đổi và chu kỳ cập nhật bắt đầu, ngay trước khi DOM được sửa và hiển thị lại.

  • updated: Hook này chạy sau khi dữ liệu được thay đổi và DOM được hiển thị lại.

Hủy (Teardown)

  • beforeDestroy: Hook này được gọi trước khi thành phần bị hủy. Bạn có thể thực hiện các hành động như dọn dẹp hoặc gửi phân tích ở đây. Thành phần vẫn hoạt động và không bị hủy.

  • destroyed: Hook này được gọi sau khi thành phần đã bị hủy. Tại đây, các lệnh không còn liên kết và các trình nghe sự kiện đã bị xóa.

VueJS cung cấp một số chỉ thị để hiển thị hoặc ẩn các phần tử dựa trên điều kiện. Các chỉ thị này bao gồm: v-if, v-else, v-else-if và v-show.

  1. v-if được sử dụng để thêm hoặc xóa các phần tử DOM dựa trên biểu thức đã cho.

  2. v-else được sử dụng để hiển thị nội dung khi biểu thức liền kề v-if chuyển thành false.

  3. v-else-if được sử dụng khi cần kiểm tra nhiều hơn hai tùy chọn.

  4. v-show tương tự như v-if, nhưng nó hiển thị tất cả các phần tử và sử dụng thuộc tính hiển thị CSS để ẩn/hiển thị các phần tử.

Các lệnh v-if và v-show có một số điểm khác biệt chính:

  • v-if chỉ kết xuất phần tử vào DOM nếu biểu thức chuyển thành true, trong khi v-show kết xuất tất cả các phần tử và sử dụng thuộc tính hiển thị CSS để ẩn/hiển thị chúng.

  • v-if hỗ trợ các chỉ thị v-else và v-else-if, trong khi v-show không hỗ trợ v-else.

  • v-if có chi phí chuyển đổi cao hơn, trong khi v-show có chi phí hiển thị ban đầu cao hơn. Do đó, v-show hiệu quả hơn nếu các phần tử được bật và tắt thường xuyên, trong khi v-if hiệu quả hơn với thời gian hiển thị ban đầu.

  • v-if hỗ trợ tab , trong khi v-show không hỗ trợ.

Với những tính năng và lifecycle hook mạnh mẽ, VueJS là một lựa chọn tuyệt vời để phát triển giao diện người dùng dễ dàng và linh hoạt.

BÀI LIÊN QUAN
1