Thành phần API trong Chế độ xem 3

Tram Ho

Vue hiện tại chưa có ngày phát hành chính thức của phiên bản 3. Nhưng lộ trình hiện tại chúng ta có thể thấy phiên bản alpha được lên kế hoạch vào cuối quý 4 năm 2019 và bản phát hình chính thức vào quý 1 năm 2020.

Vue 3

Những thay đổi chính mà Vue3 sẽ có:

  • 🐜 smaller and 🏃 faster
  • 🌟 tính năng mới
  • 🚧 exposes lower level APIs
  • ✈️ tăng khả năng hỗ trợ TypeScript
  • 🏠 codebase sẽ dễ bảo trì hơn

Composition API

Composition API là tính năng nâng cao, thêm vào API hiện tại và đặc biệt là một bộ APIs cấp thấp hơn sử dụng các tính năng của Vue bên ngoài các components.

Example new feature

Để hiểu rõ hơn thì chúng ta sẽ đi đến ví dụ của tính năng mới. Composition API bên trong Vue components sử dụng setup

setup option sẽ có dạng như sau:

Chúng ta có thể thấy rằng setup option trông giống như là Lifecyycle hooks ? Nhưng thật ra nó tuyệt vời hơn là Lifecycle hooks.

code:

Why Composition API

Code Organization

Dưới đây là 1 đoạn code gọi API để lấy các nhân vật khi không sử dụng setup

sử dụng setup

https://vue-composition-api-rfc.netlify.com/#code-organization

Thông qua ví dụ trên chúng ta có thể thấy Code Organization được thể hiện tuần tự từ trên xuống dưới thành 1 nhóm không như Options API được rải rác khắp nơi.

Logic Reuse

Để thấy được Logic Reuse được thể hiện thế nào khi sử dụng composition API, chúng ta sẽ đến ví dụ sau:

Như có thể thấy chúng ta có thể tách đoạn code này ra 1 file khác để tái sử dụng.

Lợi ích khi sử dụng Logic Reuse

  • tái sử dụng các components mà không cần dùng mixins
  • Higher Order Components
  • Renderless Components
  • Tăng khả năng linh hoạt
  • mã nguồn code được clear và rõ ràng hơn
  • performance

Bạn hãy tưởng tượng chúng ta có 1 components dài, việc tách code cấu trúc nó là điều cần thiết tăng độ làm việc hiệu quả cho team của bạn đỡ phát ngấy chán nản nhìn đống code như thế.

References

Vue Toronto
https://vuetoronto.com/videos

Chia sẻ bài viết ngay

Nguồn bài viết : Viblo