Một vài thay đổi về version mới của Vue.js (Vue 3.0) – Composition API

Tram Ho

Nếu như chúng ta đã và đang quen sử dụng Vue.js hiện tại (version 2.x) thì sắp tới, dự kiến vào khoảng đầu năm 2020, Vue.js sẽ cho ra mắt một version mới, được đánh giá là có sự thay đổi và cải tiến rõ rệt: nhanh gọn hơn, khả năng maintain, tái sử dụng tốt hơn và dễ dàng hơn khi tiếp cận với hướng native.

Composition API là một phần thay đổi cực kỳ quan trọng ở đợt “big update” lần này. Là một fan của Vue.js nên mình cũng thi thoảng lên đọc xem nó có thay đổi gì để “chém gió” với ae..

I. Setup và Lifecycle Hook:

Đây là sự thay đổi khiến mình cảm thấy thích thú nhất trong Vue 3.0. Nó mô tả ngắn gọn hơn về Lifecycle Hook trong Vue.

Chắc hẳn các bạn còn nhớ Lifecycle Hook trong Vue.js chứ. Nếu không nhớ xem lại tại đây.

setup: ở đây được gọi ngay sau khi một Vue instance được khởi tạo. Trên Lifecycle Diagrams thì nó chính là phía trước của beforeCreate, và dùng để bao bọc tất cả các phần xử lý, khai báo bên trong Component.

Về phần Lifecycle trong Vue 3.0 cũng đã có sự thay đổi. Việc sử dụng các hook thông qua các function như mounted, updated, destroy, ... đã được thay thế bằng bảng dưới đây:

Vue 2Vue 3
beforeCreatesetup
createdsetup
beforeMountonBeforeMount
mountedonMounted
beforeUpdateonBeforeUpdate
updatedonUpdated
beforeDestroyonBeforeUnmount
destroyedonUnmounted
errorCapturedonErrorCaptured

Ngoài ra Vue 3.0 có thêm 2 hook liên quan đến việc debugs đó là: onRenderTrackedonRenderTriggered

setup and props: Việc sử dụng props với setup() khá đơn giản.

II. Ref

ref: Hiểu đơn giản là nó lấy giá trị bên trong một biến. Và giá trị này có thể thay đổi (reactive). Mỗi ref của một biến sẽ có một trường value chính là giá trị của biến này.

isRef: Kiểm tra xem phần tử này có giá trị hay không.

toRefs: Sử dụng như con trỏ để tham chiếu đến từng giá trị gốc của reactive. Ví dụ mình muốn update giá trị của react lên 10:

Nó cũng được dùng để retrieve các giá trị trong object:

III. Reactive, readonly and more…

reactive: Tạo ra một object với giá trị “reactive”. Trong Vue 2.x thì nó là Vue.observable().
Thật ra mình cũng chưa từng đọc đến phần này trong Vue.js Api document. Theo mình hiểu thì nó sẽ như sau. Với phiên bản 2.x:

Với Vue 3.0 sẽ trở thành.

readonly: Trái ngược với reactive. Với reactive, chúng ta có thể thay đổi giá trị bên trong nó, nhưng với option readonly thì sẽ chỉ có quyền đọc mà thôi.

computed: Theo cách viết thì mình nghĩ đây là cú pháp dễ hiểu nhất trong các phần mình đã viết.

Vue 2.x

Vue 3.0

provide & inject: 2 thanh niên này mình cũng hay sử dụng.
Với phiên bản cũ.

Với Vue 3.0, inject có thể trả về dữ liệu default nếu như giá trị truyền vào không xác định.

Tương tự bạn cũng có thể sử dụng Injection Reactivity:

Bài viết mình xin dừng lại tại đây. Sắp tới bản chính thức ra mắt chắc chắn sẽ còn nhiều điều hấp dẫn khi sử dụng Vue 3.0 này. Cá nhân mình thấy Vue.js càng ngày càng có nét giống React. Riêng Vue 3.0 mình thấy nó có nét giống React Hook. Có thể một tương lai không xa 2 thư viện này sẽ đồng bộ hẳn với nhau như kiểu như chưa hề có cuộc chia ly thật ấy chứ. Xin chào và hẹn gặp lại.!

Nguồn: Vue.js 3.0 Composition API

Chia sẻ bài viết ngay

Nguồn bài viết : Viblo