🔥CHỌN LỌC TOP NHỮNG KHOÁ HỌC LẬP TRÌNH ONLINE NHIỀU NGƯỜI THEO HOC TẠI ĐÂY🔥

Chào mừng bạn đến với Cafedev, nơi chúng tôi chia sẻ kiến thức và kinh nghiệm về công nghệ. Trên hành trình này, chúng tôi muốn đồng hành cùng bạn khám phá về Vuejs với Các Thành Phần Bất Đồng Bộ. Vuejs không chỉ đơn giản là một framework, mà còn là một cách tiếp cận hiệu quả để xây dựng các ứng dụng web linh hoạt và mạnh mẽ. Trong bài viết này, chúng tôi sẽ cùng nhau tìm hiểu về cách sử dụng các thành phần bất đồng bộ trong Vuejs, một chủ đề hấp dẫn đầy tiềm năng. Hãy cùng nhau bắt đầu hành trình khám phá!

1.Sử Dụng Cơ Bản

Trong các ứng dụng lớn, chúng ta có thể cần chia ứng dụng thành các phần nhỏ hơn và chỉ tải một thành phần từ máy chủ khi cần thiết. Để làm điều đó được, Vue có một hàm defineAsyncComponent:

import { defineAsyncComponent } from 'vue'

const AsyncComp = defineAsyncComponent(() => {
  return new Promise((resolve, reject) => {
    // ...load component from server
    resolve(/* loaded component */)
  })
})
// ... use `AsyncComp` like a normal component

Như bạn có thể thấy, defineAsyncComponent chấp nhận một hàm tải mà trả về một Promise. Hàm resolve của Promise nên được gọi khi bạn đã nhận được định nghĩa thành phần từ máy chủ. Bạn cũng có thể gọi reject(reason) để chỉ ra rằng việc tải đã thất bại.
Nhập động ES module cũng trả về một Promise, vì vậy hầu hết thời gian chúng ta sẽ sử dụng nó kết hợp với defineAsyncComponent. Các bundler như Vite và webpack cũng hỗ trợ cú pháp này (và sẽ sử dụng nó như điểm chia nhóm), vì vậy chúng ta có thể sử dụng nó để nhập Vue SFCs:

import { defineAsyncComponent } from 'vue'

const AsyncComp = defineAsyncComponent(() =>
  import('./components/MyComponent.vue')
)

AsyncComp kết quả là một thành phần bao ngoài chỉ gọi hàm tải khi thực sự được hiển thị trên trang. Ngoài ra, nó sẽ chuyển tiếp bất kỳ props và khe cắm nào cho thành phần bên trong, vì vậy bạn có thể sử dụng bao bọc bất đồng bộ để thay thế thành phần gốc một cách mượt mà trong khi đạt được việc tải lười biếng.
Tương tự như các thành phần thông thường, các thành phần bất đồng bộ cũng có thể được đăng ký toàn cầu bằng cách sử dụng app.component():

app.component('MyComponent', defineAsyncComponent(() =>
  import('./components/MyComponent.vue')
))

Bạn cũng có thể sử dụng defineAsyncComponent khi đăng ký một thành phần cục bộ:

<script>
import { defineAsyncComponent } from 'vue'

export default {
  components: {
    AdminPage: defineAsyncComponent(() =>
      import('./components/AdminPageComponent.vue')
    )
  }
}
</script>
<template>
  <AdminPage />
</template>

Chúng cũng có thể được khai báo trực tiếp bên trong thành phần cha của chúng:

<script setup>
import { defineAsyncComponent } from 'vue'

const AdminPage = defineAsyncComponent(() =>
  import('./components/AdminPageComponent.vue')
)
</script>

<template>
  <AdminPage />
</template>

2. Trạng Thái Tải và Lỗi

Các hoạt động bất đồng bộ không thể tránh khỏi trạng thái tải và lỗi – defineAsyncComponent() hỗ trợ xử lý các trạng thái này thông qua các tùy chọn tiên tiến:

const AsyncComp = defineAsyncComponent({
  // the loader function
  loader: () => import('./Foo.vue'),

  // A component to use while the async component is loading
  loadingComponent: LoadingComponent,
  // Delay before showing the loading component. Default: 200ms.
  delay: 200,

  // A component to use if the load fails
  errorComponent: ErrorComponent,
  // The error component will be displayed if a timeout is
  // provided and exceeded. Default: Infinity.
  timeout: 3000
})

“

Nếu một thành phần tải được cung cấp, nó sẽ được hiển thị trước trong khi thành phần bên trong đang được tải. Có một độ trễ mặc định là 200ms trước khi thành phần tải được hiển thị – điều này là do trên các mạng nhanh, trạng thái tải ngay lập tức có thể được thay thế quá nhanh và kết thúc nhìn giống như một hiện tượng nhấp nháy.
Nếu một thành phần lỗi được cung cấp, nó sẽ được hiển thị khi Promise được trả về bởi hàm tải bị từ chối. Bạn cũng có thể chỉ định một thời gian chờ để hiển thị thành phần lỗi khi yêu cầu đang mất quá lâu.

4. Sử Dụng với Suspense

Các thành phần bất đồng bộ có thể được sử dụng với thành phần tích hợp sẵn. Tương tác giữa và các thành phần bất đồng bộ được hướng dẫn chi tiết ở bài này.

Cảm ơn bạn đã đồng hành cùng Cafedev trong hành trình khám phá về Vuejs và Các Thành Phần Bất Đồng Bộ. Chúng tôi hy vọng rằng bài viết này đã mang lại cho bạn những thông tin hữu ích và sự hiểu biết sâu hơn về cách sử dụng các tính năng mạnh mẽ của Vuejs để phát triển ứng dụng web. Hãy tiếp tục theo dõi các bài viết mới nhất trên Cafedev để không bỏ lỡ những thông tin và kiến thức mới nhất về công nghệ. Cảm ơn bạn và hẹn gặp lại trên Cafedev!

Các nguồn kiến thức MIỄN PHÍ VÔ GIÁ từ cafedev tại đây

Nếu bạn thấy hay và hữu ích, bạn có thể tham gia các kênh sau của CafeDev để nhận được nhiều hơn nữa:

Chào thân ái và quyết thắng!

Đăng ký kênh youtube để ủng hộ Cafedev nha các bạn, Thanks you!

BÀI VIẾT LIÊN QUANXEM THÊM