Data Fetching trong Nuxt
useFetch, useAsyncData, $fetch, lazy fetching, error handling, refresh, data caching
1Sự khác biệt chính giữa useFetch và useAsyncData trong Nuxt là gì?
Sự khác biệt chính giữa useFetch và useAsyncData trong Nuxt là gì?
Câu trả lời
useFetch là một wrapper bao quanh useAsyncData và $fetch, giúp đơn giản hóa các lệnh gọi API thông thường. Nó tự động xử lý việc xây dựng URL và nhận trực tiếp một URL làm đối số đầu tiên, trong khi useAsyncData yêu cầu một key duy nhất và một hàm fetcher tùy chỉnh. Dùng useFetch cho các lệnh gọi API đơn giản, useAsyncData cho logic fetching phức tạp.
2Tại sao nên luôn cung cấp một key duy nhất khi sử dụng useAsyncData?
Tại sao nên luôn cung cấp một key duy nhất khi sử dụng useAsyncData?
Câu trả lời
Key duy nhất cho phép Nuxt nhận diện và loại bỏ các request trùng lặp giữa server và client trong quá trình hydration SSR. Nếu không có key duy nhất, dữ liệu có thể bị re-fetch không cần thiết ở phía client sau khi render server, hoặc có thể xảy ra xung đột caching. Key cũng được dùng cho caching và quản lý state.
3Sự khác biệt giữa $fetch và useFetch trong Nuxt là gì?
Sự khác biệt giữa $fetch và useFetch trong Nuxt là gì?
Câu trả lời
$fetch là một hàm tiện ích thực hiện các request HTTP đơn giản mà không có quản lý state hay tính phản ứng, tương tự fetch native nhưng có các cải tiến của Nuxt. useFetch là một composable trả về các ref phản ứng (data, pending, error) và xử lý hydration SSR. Dùng $fetch cho các lệnh gọi mệnh lệnh trong event handler, và useFetch cho fetching khai báo trong các component.
Làm thế nào để bật lazy fetching với useFetch hoặc useAsyncData?
Làm thế nào để xử lý lỗi trong quá trình data fetching với useFetch?
+17 câu hỏi phỏng vấn
Các chủ đề phỏng vấn Vue.js / Nuxt.js khác
Kiến thức nền tảng JavaScript
JavaScript hiện đại (ES6+)
Kiến thức cơ bản về Vue
Component Vue
Vue Router
Pinia State Management
Vuex (Legacy)
Composition API
Tính reactive của Vue
Kiến thức cơ bản về Nuxt
SSR & SSG trong Nuxt
Server Routes Nuxt
Module Nuxt
Composables trong Vue
Form & Validation Vue
Quản lý trạng thái Nuxt
Testing trong Vue
Triển khai Nuxt & CI/CD
Hiệu năng Vue
Các mẫu nâng cao trong Vue
TypeScript với Vue
Xác thực Nuxt
SEO với Nuxt
Quốc tế hóa trong Nuxt
Kiến trúc Vue
Bảo mật Nuxt
Hệ sinh thái Vue
Di chuyển Vue 2→3 & Nuxt 2→3
Nắm vững Vue.js / Nuxt.js cho lần phỏng vấn tiếp theo
Truy cập tất cả câu hỏi, flashcards, bài kiểm tra kỹ thuật, bài tập code review và mô phỏng phỏng vấn.
Bắt đầu miễn phí