Performance in VueJS #4 - Optimizing third-party libraries
VueJS

Performance in VueJS #4 – Optimizing third-party libraries

Như trong các phần trước trong series mình đã trình bày với các bạn một số cách để Optimize code, nó chắc chắn sẽ giúp rất nhiều cho dự án của bạn. Nhưng cái gì cũng có cái giá của nó @@, hãy xem giá phải trả như thế nào rỗi hãy làm nhé. Và trong bài này mình sẽ nói đến những cái giá mà bạn phải trả cũng như giúp bạn xem lên Optimize phần nào dựa trên 1 số tool nhé.

Performance in VueJS #2 - Router performance
VueJS

Performance in VueJS #2 – Router performance

Như phần trước mình đã giới thiệu với các bạn Dynamic import và chắc các bạn cũng đã thấy một phần tác dụng của nó. Nhưng đó chỉ là phần lazy load import component thôi, lần này mình sẽ giới thiệu với các bạn các lazy load để import cả module nhé.

40da9236-9c26-11e4-9e2b-6611cd743423
VueJS

Performance in VueJS #1 – Dynamic import – Lazy loading Vue components

Khi app của các bạn là đủ lớn, có nhiều user vào hoặc khi các bạn muốn Optimize để làm tăng Performance để làm cho UX người dùng được tốt hơn. Thì có lẽ có rất nhiều điều các bạn cần làm như là confix cache bên server, nén trên server, … config Front-end, Optimize image, … v.v. Nhưng trong series này mình sẽ giới thiệu với các bạn cách Optimize trong VueJS nhé. Thực ra thì khi mà hiểu với VueJS rồi thì các bạn cũng có thể tự tin làm với React hay Angular 2+ được. ^^

Vuex getting started!
VueJS

Vuex getting started!

Cũng như với Angular có Ngrx, React có Redux thì VueJS cũng có thư viện để quản lí State bên trong Store và đó chính là VueX nhé các bạn. Ở phần này chúng ta sẽ cùng tìm hiểu cơ bản những thành phần chính của VueX cũng như cách dùng của nó nhé.

All about guards in VueJS
VueJS

All about guards in VueJS

Cũng như các Framework khác trong JS thì VueJS cũng có các Feature bảo vệ route hay phân quyền của riêng nó. Theo mình thấy thì ở phần này VueJS lại được 1 điểm cộng nữa vì mình thấy nó khá là dễ dùng.

Lifecycle Hooks in VueJS
VueJS

Lifecycle Hooks in VueJS

Cũng như các Framework khác của JS, VueJS cũng có Lifecycle Hooks của riêng nó. Nhưng tựu chung lại các Lifecycle Hooks của Vue, Angular2+ hay ReactJS đều để xử lí Component từ khi nó Init đến khi nó Destroy. ^^

Watch in VueJS
VueJS

Watchers in VueJS

Nếu các bạn đã đọc phần Compoted trong VueJS. Thì chắc cũng sẽ tự mình đặt ra câu hỏi nếu trong trường hợp không dùng compoted ở bên ngoài phần View thì nó đâu được gọi. Vậy làm sao để có thể theo dõi nếu Data properties có thay đổi, Don’t worry!. VueJS đã cho ta một tính năng cực mạnh, đó là Watchers.

Computed in VueJS
VueJS

Computed in VueJS

Trong VueJS có giới thiệu đến chúng ta 1 thuộc tính của đối tượng Vue đó chính là Compoted. Compoted được giới thiệu là một giải pháp để cache dữ liệu từ đó góp phần làm tăng Performance của App, tránh trường hợp 1 logic phải tính toán lại nhiều lần như khi ta dùng Methods.