Vue vs React

- 6 mins

Cách đây hơn 1 tháng khi nhà nhà đang dùng React để làm frontend website, các product hiện tại cũng đang làm với React thì mình quyết định tìm hiểu Vue và quyết định sẽ gắn bó với Vue ngay sau khi thử implement một mini project. Trước đó mình chưa hề biết tới Vue, cả cái cách đọc chữ này là “View”.

Mình nghĩ cũng có nhiều bài so sánh rồi nên mình chỉ đưa ra những gì mình trải nghiệm và cảm nhận được:

1. React vẫn có nhiều lý do để lựa chọn:

React có cha đẻ là Facebook, có cộng đồng lớn và rất active. Chưa kể React Native trên mobile đang là một thế lực mạnh mẽ. Nhưng khi làm việc nhiều với React mình vẫn thấy có điều gì đó thiếu thiếu, những cái này mình sẽ để dành cho những cái bên dưới.

2. Doc của Vue cực kỳ rõ ràng

Đây là cái mình ấn tượng đầu tiên với Vue. Doc được viết kỹ và clear, bố cục rõ ràng. Các plugin quan trọng như router, vuex, ssr đều có doc riêng chứ không là 1 cái đề mục trong doc chính. Chỉ riêng điều này đã khiến Vue có phần dễ học hơn React.

Cộng đồng Vue từ sau phiên bản 2.0 thì đã phát triển mạnh lên rất nhanh. Github Vue đang có khoảng 67K star so với 76K của React có thể coi như tương đương.

3. JSX vs template

Có lẽ mình nằm trong tập những người không thích món này. Lý do rất đơn giản: JSX được dùng cho phần render, phần còn lại code JS chính là business code. Hai thứ này nằm chung không khác gì mô hình MVC mà trong đó View và Controller dính vào nhau. Chưa kể syntax rất rối với những component có phần render của chính nó và render của con nó (vd: list và list item).

Vue sử dụng khái niệm template để làm việc với các thẻ HTML và Virtual DOM giống như React nhưng chúng tách rời nhau. Bản thân Vue có support JSX cho những bạn khoái món này.

4. React không có: Directive, Mixins, Plugin và Filters

Một trong những thứ giúp Vue render nhẹ hơn React đó là Vue không phải tốn thêm các DOM Node không cần thiết:

Ví dụ: Ta có chuỗi sau: “Keep me in touch viettranx@gmail.com”. Chúng ta muốn “viettranx@gmail.com” trở thành 1 cái link có thể bấm được. Trong React ta có 2 giải pháp: hoặc là viết 1 hàm để detect và convert trước khi truyền vào Component hoặc là 1 component khác để làm việc này. Cách viết component để bọc cái text trên sẽ khiến cây DOM nặng hơn một cách không cần thiết, viết hàm thì cũng được đó nhưng nó không đẹp. Liệu trong React chúng ta có kỹ thuật để mình chỉ cần truyền 1 prop nào đó cho tất cả các component (vd như emaiLinkify) thì nó sẽ hiểu là text trong nó sẽ phải parse lại không ?!

Hay thậm chí chúng ta muốn inject vào tất cả các hàm didMount của React để log hay debug chẳng hạn ?!

Trong Vue chúng ta có thể rất dễ dàng làm được 2 điều trên và thậm chí hơn thế nữa.

=> Điều này khiến Vue có tính tái sử dụng lại các thành phần cao hơn React.

5. Quản lý state: Redux hay MobX. có cần dùng redux saga hay persistence không ??

Hẵn là nhiều người vẫn đang vật lộn với Redux và các phiên bản bổ sung của nó. Thậm chí nhiều người bỏ qua cả Redux luôn, viết cả ứng dụng to đùng không có Redux. Các event được truyền thông qua props, chạy từ ông nội tới các đời con cháu chít chắt của nó để cập nhật lại state và re-render… Nhiều bạn vẫn hỏi mình làm sao để “bắn sự kiện” qua các component anh em nó mà không qua cha nó ?!? Đơn giản là không được, các bạn phải tuân thủ “state of flow”, hoặc phải dùng Redux để nó connect vào state và update thông qua dispatch action qua các reducer.

Trong Vue chúng ta có cách đơn giản hơn nhiều là dùng Global Bus. Nó chỉ là cái đối tượng Vue rỗng, nhưng dùng để emit event thông qua nó. Component nào có lắng nghe trên bus thì nhận được (Observer/Subject Pattern). Vô cùng đơn giản. Hoặc nếu ứng dụng phức tạp hơn thì dùng Vuex, cái này giống với Redux nhưng cũng dễ xài hơn. Vuex có Doc riêng và cũng chả phải lăn tăn đi xài cái nào khác vì nó là chính chủ.

6. React: Update trên Component cha thì tất cả component con cũng re-render:

Đây là nguyên tắc hoạt động của React. Đương nhiên chúng ta có thể dùng PureComponent hoặc ShouldComponentUpdate (SCU) để tối ưu việc này. Tuy nhiên nếu SCU xài không cẩn thận có thể làm mất tính nhất quán giữ state và view.

Trong Vue thì nó track các component có ràng buộc với nhau và chỉ update khi nào cần. Phía dev chúng ta không cần phải lo việc này.

Thêm nữa là Vue có khái niệm watch (nghe đồn lấy từ Angular) và computed rất hay. Computed có cache nên cũng hỗ trợ rất nhiều cho việc tối ưu re-render các VDOM.

Cơ chế binding data của Vue cũng rất dễ hiểu, cứ data đổi là nó trigger re-render. Chúng ta không cần quan tâm setState hay phải phân biệt state và prop (bên React) là gì, khác nhau ra sao.

7. Benchmark:

Theo như các benchmark hiện tại thì Vue nhỉnh hơn React cả về tốt độ và tối ưu memory. Thật sự mình không quan tâm cái này lắm, vì tốt độ chênh lệch không đáng kể. Trong production thì cả 2 yếu tố này còn tuỳ vào cách chúng ta dev, lựa chọn và config các loader/bundler nữa.

8. Author:

Tác giả của Vue là anh Evan và anh vẫn đang là người dev chính cho toàn bộ product này (nếu không muốn nói là dev một mình). Hiện tại anh có đang chạy 1 chiến dịch trên Patreon với goal là 12.000$/tháng để chuyên tâm cho cộng đồng Vue.

Kết

Vue còn rất nhìu cái hay ho nữa mình trong khuôn khổ của 1 status mình không thể bê vào hết. Chúc cộng đồng JS Dev VN sẽ có thêm nhiều Vue Developer nữa.

Fun fact: Hồi mới thấy chữ Vue mình không biết đọc. Cả chữ là VueJS nếu gõ telex có thể bị nhầm thành Véu (giống “Vếu”) =]] =]] =]]

Viet Tran

Viet Tran

A Man who is developing apps with Red Bull

comments powered by Disqus
rss facebook twitter github youtube mail spotify lastfm instagram linkedin google google-plus pinterest medium vimeo stackoverflow reddit quora