Tổng quan về Vue.js

Vue là một dự án rất ấn tượng. Đó là một khung JavaScript rất phổ biến, một khung công tác đang trải qua một sự phát triển vượt bậc. Nó đơn giản, nhỏ và rất hiệu quả. Tìm hiểu thêm về nó


Vue là một khung công tác giao diện người dùng JavaScript rất phổ biến, một khung công tác đang trải qua một sự phát triển vượt bậc.

Nó đơn giản, nhỏ (~ 24KB) và rất hiệu quả. Nó có cảm giác khác với tất cả các khung công tác JavaScript và thư viện chế độ xem khác. Hãy cùng tìm hiểu lý do tại sao.

Đầu tiên, một khung công tác giao diện người dùng JavaScript là gì?

Nếu bạn không chắc JavaScript framework là gì, Vue là nơi hoàn hảo đầu tiên bạn gặp phải.

Khung JavaScript giúp chúng tôi tạo ra các ứng dụng hiện đại. Các ứng dụng JavaScript hiện đại chủ yếu được sử dụng trên Web, nhưng cũng hỗ trợ rất nhiều ứng dụng Máy tính để bàn và Di động.

Cho đến đầu những năm 2000, các trình duyệt không có khả năng như bây giờ. Chúng kém mạnh mẽ hơn rất nhiều và việc xây dựng các ứng dụng phức tạp bên trong chúng là không khả thi về mặt hiệu suất và công cụ thậm chí không phải là thứ mà mọi người nghĩ đến.

Mọi thứ đã thay đổi khi Google công bố Google Maps và GMail, hai ứng dụng chạy bên trong trình duyệt. Ajax làm cho các yêu cầu mạng không đồng bộ trở nên khả thi và theo thời gian các nhà phát triển bắt đầu xây dựng trên nền tảng Web, trong khi các kỹ sư làm việc trên chính nền tảng: trình duyệt, tiêu chuẩn Web, API trình duyệt và ngôn ngữ JavaScript.

Các thư viện như jQuery và Mootools là những dự án lớn đầu tiên được xây dựng dựa trên JavaScript và cực kỳ phổ biến trong một thời gian. Về cơ bản, họ đã cung cấp một API đẹp hơn để tương tác với trình duyệt và cung cấp các giải pháp thay thế cho các lỗi và sự mâu thuẫn giữa các trình duyệt khác nhau.

Các khung như Backbone, Ember, Knockout, AngularJS là làn sóng đầu tiên của các khung JavaScript hiện đại. Làn sóng thứ hai, là làn sóng hiện tại, có React, Angular và Vue là các tác nhân chính của nó.

Lưu ý rằng jQuery, Ember và các dự án khác mà tôi đã đề cập vẫn đang được sử dụng nhiều, được bảo trì tích cực và hàng triệu trang web dựa vào chúng. Điều đó nói rằng, các kỹ thuật và công cụ ngày càng phát triển, và là một nhà phát triển JavaScript, giờ đây bạn có thể được yêu cầu phải biết React, Angular hoặc Vue hơn là những framework cũ hơn đó.

Các khung làm việc trừu tượng hóa sự tương tác với trình duyệt và DOM. Thay vì thao tác các phần tử bằng cách tham chiếu chúng trong DOM, chúng tôikhai báoxác định và tương tác với chúng, ở cấp độ cao hơn.

Sử dụng một khuôn khổ giống như sử dụng ngôn ngữ lập trình C thay vì sử dụng hợp ngữ để viết các chương trình hệ thống. Nó giống như sử dụng máy tính để viết tài liệu thay vì sử dụng máy đánh chữ. Nó giống như việc bạn có một chiếc xe tự lái thay vì tự mình lái xe.

Chà, không xa đến vậy, nhưng bạn có ý tưởng. Thay vì sử dụng các API cấp thấp do trình duyệt cung cấp để thao tác các phần tử và xây dựng các hệ thống cực kỳ phức tạp để viết một ứng dụng,bạn sử dụng các công cụ do những người rất thông minh xây dựng để giúp cuộc sống của chúng ta dễ dàng hơn.

Sự phổ biến của Vue

Mức độ phổ biến của Vue.js?

Vue đã:

  • 7600 stars on GitHub in 2016
  • 36700 stars on GitHub in 2017

và nó có hơn 100.000 ngôi sao trên GitHub, tính đến tháng 6 năm 2018.

Số lượt tải xuống npm của nó đang tăng lên mỗi ngày và bây giờ là ~ 350.000 lượt tải xuống mỗi tuần.

Tôi sẽ nói Vue làrất phổ biến, với những con số đó.

Về mặt tương đối, nó có số lượng các ngôi sao GitHub của React đã ra đời trước đó nhiều năm.

Tất nhiên, những con số không phải là tất cả. Ấn tượng của tôi về Vue là các nhà phát triểnyêu và quýnó.

Một điểm mấu chốt trong thời điểm Vue nổi lên là việc áp dụng hệ sinh thái Laravel, một khuôn khổ ứng dụng web PHP cực kỳ phổ biến, nhưng kể từ đó nó đã phổ biến rộng rãi trong nhiều cộng đồng phát triển khác.

Tại sao các nhà phát triển yêu thích Vue

Đầu tiên, Vue được gọi làkhuôn khổ tiến bộ.

Điều này có nghĩa là nó thích ứng với nhu cầu của nhà phát triển. Trong khi các khung công tác khác yêu cầu mua lại hoàn toàn từ nhà phát triển hoặc nhóm và thường muốn bạn viết lại ứng dụng hiện có vì chúng yêu cầu một số quy ước cụ thể, Vue vui vẻ truy cập vào ứng dụng của bạn với mộtscript, để bắt đầu và nó có thể phát triển theo nhu cầu của bạn, trải rộng từ 3 dòng để quản lý toàn bộ lớp chế độ xem của bạn.

Bạn không cần biết về webpack, Babel, npm hay bất cứ thứ gì để bắt đầu với Vue, nhưng khi bạn đã sẵn sàng, Vue sẽ giúp bạn dễ dàng dựa vào chúng.

Đây là một điểm hấp dẫn tuyệt vời, đặc biệt là trong hệ sinh thái hiện tại của các thư viện và khuôn khổ giao diện người dùng JavaScript có xu hướng xa lánh những người mới đến và cả những nhà phát triển có kinh nghiệm cảm thấy lạc lõng giữa biển khả năng và sự lựa chọn.

Vue.js có lẽ là khung giao diện người dùng dễ tiếp cận hơn. Một số người gọi Vue làjQuery mới, bởi vì nó dễ dàng đi vào ứng dụng thông qua thẻ script và dần dần có được dung lượng từ đó. Hãy coi đó là một lời khen ngợi, vì jQuery đã thống trị Web trong vài năm qua và nó vẫn hoạt động tốt trên một số lượng lớn các trang web.

Vue chọn từ những ý tưởng tốt nhất. Nó được xây dựng bằng cách chọn ra những ý tưởng tốt nhất của các framework như Angular, React và Knockout, và bằng cách chọn ra những lựa chọn tốt nhất mà các framework đó đã đưa ra và loại trừ một số cái kém rực rỡ hơn, nó bắt đầu như một bộ “tốt nhất” và ngày càng phát triển từ đó.

Vue.js định vị chính nó ở đâu trong bối cảnh khung công tác

2 con voi trong phòng, khi nói về phát triển web,Phản ứngAngular. Vue định vị bản thân như thế nào so với 2 framework lớn và phổ biến đó?

Vue được tạo ra bởi Evan You khi anh ấy đang làm việc tại Google trên ứng dụng AngularJS (Angular 1.0) và được sinh ra từ nhu cầu tạo ra các ứng dụng hiệu quả hơn. Vue đã chọn một số cú pháp tạo khuôn mẫu Angular, nhưng loại bỏ ngăn xếp phức tạp, cố chấp mà Angular yêu cầu và làm cho nó hoạt động rất hiệu quả.

Angular mới (Angular 2.0) cũng giải quyết được nhiều vấn đề về AngularJS, nhưng theo những cách rất khác nhau và yêu cầu phải mua lại đểTypeScriptmà không phải nhà phát triển nào cũng thích sử dụng (hoặc muốn tìm hiểu).

Còn React thì sao? Vue đã lấy nhiều ý tưởng hay từ React, quan trọng nhất là Virtual DOM. Nhưng Vue thực hiện nó với một số loại quản lý phụ thuộc tự động, theo dõi những thành phần nào bị ảnh hưởng bởi sự thay đổi của trạng thái để chỉ những thành phần đó được hiển thị lại khi thuộc tính trạng thái đó thay đổi. Mặt khác, trong React khi một phần của trạng thái ảnh hưởng đến một thành phần thay đổi, thành phần đó sẽ được hiển thị lại và theo mặc định, tất cả các phần tử con của nó cũng sẽ được hiển thị. Để tránh điều này, bạn cần sử dụng phương thức shouldComponentUpdate của mỗi thành phần và xác định xem thành phần đó có nên được kết xuất hay không. Điều này mang lại cho Vue một chút lợi thế về tính dễ sử dụng và tăng hiệu suất hoạt động.

Một điểm khác biệt lớn với React là JSX. Mặc dù về mặt kỹ thuật bạn có thể sử dụng JSX trong Vue, nhưng đó không phải là một cách tiếp cận phổ biến và thay vào đó, hệ thống tạo khuôn mẫu được sử dụng. Mọi tệp HTML đều là một mẫu Vue hợp lệ, trong khi JSX rất khác với HTML và có đường cong học tập cho những người trong nhóm có thể chỉ cần làm việc với phần HTML của ứng dụng của bạn, chẳng hạn như nhà thiết kế. Các mẫu Vue rất giống với Mustache và Handlebars (mặc dù chúng khác nhau về tính linh hoạt) và do đó, chúng quen thuộc hơn với các nhà phát triển đã sử dụng các framework như Angular và Ember.

Thư viện quản lý nhà nước chính thức, Vuex, tuân theo kiến trúc Flux và hơi giống vớiReduxtrong các khái niệm của nó. Một lần nữa, đây là một phần của những điều tích cực về Vue, công ty đã nhìn thấy mô hình tốt này trong React và mượn nó vào hệ sinh thái của nó. Và trong khi bạn có thể sử dụng Redux với Vue, Vuex được thiết kế riêng cho Vue và các hoạt động bên trong của nó.

Vue linh hoạt nhưng thực tế là nhóm cốt lõi duy trì hai gói rất quan trọng đối với bất kỳ ứng dụng web nào như định tuyến và quản lý trạng thái làm cho nó ít bị phân mảnh hơn nhiều so với React, ví dụ:vue-routervuexlà chìa khóa thành công của Vue. Bạn không cần phải lựa chọn hay lo lắng nếu thư viện bạn chọn sẽ được duy trì trong tương lai và sẽ cập nhật các bản cập nhật khung và chính thức, chúng là thư viện chính thống cho thị trường ngách của họ (nhưng bạn có thể chọn sử dụng những gì bạn thích, tất nhiên).

Một điều đặt Vue vào một nhóm khác so với React và Angular là Vue là mộtindiedự án: nó không được hỗ trợ bởi một tập đoàn lớn như Facebook hay Google. Thay vào đó, nó hoàn toàn được hỗ trợ bởi cộng đồng, nơi thúc đẩy sự phát triển thông qua các khoản quyên góp và tài trợ. Điều này đảm bảo rằng lộ trình của Vue không bị thúc đẩy bởi một chương trình nghị sự của công ty.

Tải xuống miễn phí của tôiSổ tay Vue


Các hướng dẫn vue khác: