Thư Viện Câu Hỏi Phỏng Vấn

Khi danh sách lên đến hàng chục nghìn phần tử, việc render toàn bộ DOM sẽ gây treo trình duyệt.

Circular dependency xảy ra khi Store A gọi Store B và Store B gọi lại Store A.

Sử dụng computed với getter/setter cho phép tạo ra một lớp trung gian giữa state thực tế và giá trị hiển thị trên UI.

Để đảm bảo Type Safety, cần tuân thủ các quy tắc sau:

Hydration Mismatch xảy ra khi nội dung HTML do server render khác với nội dung client render lần đầu.

reactive mặc định sẽ chuyển đổi sâu (deep conversion) tất cả các thuộc tính lồng nhau thành reactive objects.

Trong các phiên bản Vue 3.x gần đây, đặc biệt với sự ổn định của Reactivity System, việc sử dụng ref() được ưu tiên vì tính nhất quán. Khi dùng reactive(), chúng ta dễ gặp lỗi mất tính phản ứng (reactivity loss) khi destructuring object. ref() giữ giá trị trong một object wrapper (.value), giúp đảm bảo tính phản ứng ngay cả khi truyền qua các hàm hoặc component khác nhau. Trong dự án Enterprise, việc dùng ref() giúp code dễ dự đoán hơn, tránh các bug liên quan đến tham chiếu bộ nhớ.

shallowRef giúp giảm tải cho hệ thống Reactivity bằng cách chỉ theo dõi sự thay đổi ở cấp độ root của object, thay vì thực hiện deep tracking. Điều này cực kỳ hữu ích khi làm việc với các tập dữ liệu lớn (như danh sách hàng nghìn items từ API). Khi cần cập nhật thủ công, ta sử dụng triggerRef để ép buộc Vue cập nhật DOM. Cách tiếp cận này giúp giảm đáng kể chi phí CPU cho việc khởi tạo proxy trên các object lồng nhau phức tạp.

Trong script setup, các side effects nên được quản lý thông qua watchEffect hoặc watch với tùy chọn flush: 'post'. Sử dụng 'post' giúp đảm bảo code chạy sau khi DOM đã được cập nhật, tránh việc truy cập vào các phần tử DOM chưa sẵn sàng. Ngoài ra, cần tận dụng onScopeDispose để dọn dẹp các timer hoặc event listeners, tránh rò rỉ bộ nhớ (memory leaks) trong các ứng dụng SPA phức tạp.

Đối với dự án lớn, nên chia nhỏ store theo từng domain nghiệp vụ thay vì một store tổng. Sử dụng Setup Stores thay vì Options Stores để tận dụng khả năng inject các composables khác. Cần chú ý đến việc sử dụng storeToRefs khi destructuring để giữ tính phản ứng. Trong kiến trúc Micro-frontends, cần thiết lập cơ chế chia sẻ state thông qua một layer trung gian hoặc event bus nếu các ứng dụng cần giao tiếp với nhau.

Effect Scope (effectScope) cho phép gom nhóm các hiệu ứng phản ứng (computed, watch) vào một phạm vi duy nhất. Khi scope này bị hủy (stop), tất cả các effect bên trong sẽ tự động dừng lại. Đây là kỹ thuật quan trọng để tạo các composables có thể tái sử dụng mà không gây rò rỉ bộ nhớ khi được gọi bên ngoài vòng đời của một component Vue.

Khi truyền props vào một hàm composable, nếu truyền trực tiếp, tính phản ứng sẽ bị mất nếu props đó được destructure. toRefs chuyển đổi một reactive object thành một object chứa các refs tương ứng, đảm bảo rằng khi props thay đổi từ component cha, giá trị bên trong composable vẫn được cập nhật đồng bộ. Đây là best practice để đảm bảo tính toàn vẹn của dữ liệu trong các logic phức tạp.

Để tránh tình trạng state của test này ảnh hưởng đến test khác, cần reset store sau mỗi test case. Sử dụng hàm $reset() của Pinia hoặc tạo một instance Pinia mới cho mỗi test bằng cách sử dụng createPinia() và setActivePinia(). Việc cô lập môi trường test là bắt buộc để đảm bảo tính chính xác của các kịch bản kiểm thử tự động.

computed() là cơ chế lazy evaluation, chỉ tính toán lại khi các dependency thay đổi và kết quả được cache. watch() là cơ chế thực thi side effects khi dữ liệu thay đổi. Trong Enterprise, ưu tiên dùng computed() cho các logic biến đổi dữ liệu để tận dụng caching, chỉ dùng watch() khi cần thực hiện các tác vụ bất đồng bộ hoặc tương tác với DOM/API bên ngoài.

Để an toàn với TypeScript, cần định nghĩa các InjectionKey. Điều này giúp định nghĩa kiểu dữ liệu của giá trị được inject ngay tại thời điểm compile, tránh lỗi runtime. Ví dụ: const UserKey: InjectionKey = Symbol(). Khi sử dụng, việc kiểm tra giá trị null/undefined là bắt buộc để đảm bảo ứng dụng không bị crash khi component cha chưa cung cấp giá trị.