VueJS - Tổng quan

VueJSlà một khung JavaScript tiến bộ mã nguồn mở được sử dụng để phát triển các giao diện web tương tác. Nó là một trong những framework nổi tiếng được sử dụng để đơn giản hóa việc phát triển web. VueJS tập trung vào lớp xem. Nó có thể dễ dàng tích hợp vào các dự án lớn để phát triển front-end mà không gặp bất kỳ vấn đề gì.

Quá trình cài đặt VueJS rất dễ bắt đầu. Bất kỳ nhà phát triển nào cũng có thể dễ dàng hiểu và xây dựng các giao diện web tương tác trong một vấn đề thời gian. VueJS được tạo bởi Evan You, một cựu nhân viên của Google. Phiên bản đầu tiên của VueJS được phát hành vào tháng 2 năm 2014. Gần đây, nó đã đạt 64.828 sao trên GitHub, khiến nó rất phổ biến.

Đặc trưng

Sau đây là các tính năng có sẵn với VueJS.

DOM ảo

VueJS sử dụng DOM ảo, cũng được sử dụng bởi các khung công tác khác như React, Ember, v.v. Các thay đổi không được thực hiện đối với DOM, thay vào đó, một bản sao của DOM được tạo ra ở dạng cấu trúc dữ liệu JavaScript . Bất cứ khi nào cần thực hiện bất kỳ thay đổi nào, chúng sẽ được thực hiện đối với cấu trúc dữ liệu JavaScript và cấu trúc dữ liệu sau được so sánh với cấu trúc dữ liệu ban đầu. Những thay đổi cuối cùng sau đó được cập nhật vào DOM thực, người dùng sẽ thấy thay đổi. Điều này tốt về mặt tối ưu hóa, nó ít tốn kém hơn và các thay đổi có thể được thực hiện với tốc độ nhanh hơn.

Liên kết dữ liệu

Tính năng ràng buộc dữ liệu giúp thao tác hoặc gán giá trị cho các thuộc tính HTML, thay đổi kiểu, gán các lớp với sự trợ giúp của chỉ thị ràng buộc được gọi là v-bind có sẵn với VueJS.

Các thành phần

Các thành phần là một trong những tính năng quan trọng của VueJS giúp tạo các phần tử tùy chỉnh, có thể được sử dụng lại trong HTML.

Xử lý sự kiện

v-on là thuộc tính được thêm vào các phần tử DOM để lắng nghe các sự kiện trong VueJS.

Hoạt ảnh / Chuyển tiếp

VueJS cung cấp nhiều cách khác nhau để áp dụng chuyển đổi sang các phần tử HTML khi chúng được thêm / cập nhật hoặc xóa khỏi DOM. VueJS có một thành phần chuyển tiếp tích hợp cần được bao bọc xung quanh phần tử để có hiệu ứng chuyển tiếp. Chúng tôi có thể dễ dàng thêm thư viện hoạt ảnh của bên thứ ba và cũng có thể thêm nhiều tương tác hơn vào giao diện.

Thuộc tính tính toán

Đây là một trong những tính năng quan trọng của VueJS. Nó giúp lắng nghe những thay đổi được thực hiện đối với các phần tử giao diện người dùng và thực hiện các tính toán cần thiết. Không cần mã hóa bổ sung cho việc này.

Mẫu

VueJS cung cấp các mẫu dựa trên HTML liên kết DOM với dữ liệu cá thể Vue. Vue biên dịch các mẫu thành các hàm DOM Render ảo. Chúng ta có thể sử dụng mẫu của các hàm kết xuất và để làm như vậy chúng ta phải thay mẫu bằng hàm kết xuất.

Chỉ thị

VueJS có các chỉ thị tích hợp sẵn như v-if, v-else, v-show, v-on, v-bind và v-model, được sử dụng để thực hiện các hành động khác nhau trên giao diện người dùng.

Người theo dõi

Người theo dõi được áp dụng cho dữ liệu thay đổi. Ví dụ, các phần tử đầu vào của biểu mẫu. Ở đây, chúng tôi không phải thêm bất kỳ sự kiện bổ sung nào. Watcher đảm nhận việc xử lý mọi thay đổi dữ liệu, làm cho mã trở nên đơn giản và nhanh chóng.

định tuyến

Điều hướng giữa các trang được thực hiện với sự trợ giúp của vue-router.

Nhẹ

VueJS script rất nhẹ và hiệu suất cũng rất nhanh.

Vue-CLI

VueJS có thể được cài đặt tại dòng lệnh bằng giao diện dòng lệnh vue-cli. Nó giúp dễ dàng xây dựng và biên dịch dự án bằng vue-cli.

So sánh với các khung công tác khác

Bây giờ chúng ta hãy so sánh VueJS với các framework khác như React, Angular, Ember, Knockout và Polymer.

VueJS v / s React

Virtual DOM

DOM ảo là một đại diện ảo của cây DOM. Với DOM ảo, một đối tượng JavaScript được tạo giống như DOM thực. Bất kỳ lúc nào cần thực hiện thay đổi đối với DOM, một đối tượng JavaScript mới sẽ được tạo và các thay đổi được thực hiện. Sau đó, cả hai đối tượng JavaScript đều được so sánh và những thay đổi cuối cùng được cập nhật trong DOM thực.

VueJS và React đều sử dụng DOM ảo, điều này làm cho nó nhanh hơn.

Template v/s JSX

VueJS sử dụng html, js và css riêng biệt. Người mới bắt đầu có thể hiểu và áp dụng phong cách VueJS rất dễ dàng. Cách tiếp cận dựa trên mẫu cho VueJS rất dễ dàng.

React sử dụng cách tiếp cận jsx. Mọi thứ đều là JavaScript cho ReactJS. HTML và CSS đều là một phần của JavaScript.

Installation Tools

React sử dụng create react app và VueJS sử dụng vue-cli /CDN/npm. Cả hai đều rất dễ sử dụng và dự án được thiết lập với tất cả các yêu cầu cơ bản. React cần webpack để xây dựng, trong khi VueJS thì không. Chúng ta có thể bắt đầu với mã hóa VueJS ở bất kỳ đâu trong jsfiddle hoặc codepen bằng cách sử dụng thư viện cdn.

Popularity

React phổ biến hơn VueJS. Cơ hội việc làm với React nhiều hơn VueJS. Có một tên tuổi lớn đằng sau React, tức là Facebook đã làm cho nó trở nên phổ biến hơn. Vì, React sử dụng khái niệm cốt lõi của JavaScript, nó sử dụng phương pháp tốt nhất của JavaScript. Một người làm việc với React chắc chắn sẽ rất giỏi với tất cả các khái niệm JavaScript.

VueJS là một khung công tác đang phát triển. Hiện tại, cơ hội việc làm với VueJS ít hơn so với React. Theo một cuộc khảo sát, nhiều người đang thích nghi với VueJS, điều này có thể khiến nó trở nên phổ biến hơn so với React và Angular. Có một cộng đồng tốt đang làm việc trên các tính năng khác nhau của VueJS. Bộ định tuyến vue được cộng đồng này duy trì với các bản cập nhật thường xuyên.

VueJS đã lấy những phần tốt từ Angular và React và đã xây dựng một thư viện mạnh mẽ. VueJS nhanh hơn nhiều so với React / Angular vì thư viện nhẹ của nó.

VueJS v / s Angular

Similarities

VueJS có rất nhiều điểm tương đồng với Angular. Các chỉ thị như v-if, v-for gần tương tự như ngIf, ngFor của Angular. Cả hai đều có giao diện dòng lệnh để cài đặt dự án và xây dựng nó. VueJS sử dụng Vue-cli và Angular sử dụng angle-cli. Cả hai đều cung cấp liên kết dữ liệu hai chiều, kết xuất phía máy chủ, v.v.

Complexity

Vuejs rất dễ học và bắt đầu. Như đã thảo luận trước đó, một người mới bắt đầu có thể lấy thư viện CDN của VueJS và bắt đầu với codepen và jsfiddle.

Đối với Angular, chúng ta cần trải qua một loạt các bước để cài đặt và đối với những người mới bắt đầu làm quen với Angular sẽ gặp chút khó khăn. Nó sử dụng TypeScript để viết mã, một điều khó đối với những người đến từ nền tảng JavaScript cốt lõi. Tuy nhiên, nó dễ học hơn đối với người dùng có nền tảng Java và C #.

Performance

Để quyết định hiệu suất, nó là vào người dùng. Kích thước tệp VueJS nhẹ hơn nhiều so với Angular. So sánh hiệu suất khung được cung cấp trong liên kết sauhttp://stefankrause.net/js-frameworks-benchmark4/webdriver-ts/table.html

Popularity

Hiện tại, Angular phổ biến hơn VueJS. Rất nhiều tổ chức sử dụng Angular, khiến nó trở nên rất phổ biến. Cơ hội việc làm cũng nhiều hơn cho các ứng viên có kinh nghiệm trong Angular. Tuy nhiên, VueJS đang chiếm chỗ đứng trên thị trường và có thể coi là đối thủ cạnh tranh tốt của Angular và React.

Dependencies

Angular cung cấp rất nhiều tính năng được tích hợp sẵn. Chúng tôi phải nhập các mô-đun cần thiết và bắt đầu với nó, ví dụ: @ angle / animations, @ angle / form.

VueJS không có tất cả các tính năng tích hợp sẵn như Angular và cần phải phụ thuộc vào các thư viện của bên thứ ba để hoạt động trên đó.

Flexibility

VueJS có thể dễ dàng hợp nhất với bất kỳ dự án lớn nào khác mà không gặp bất kỳ vấn đề gì. Angular sẽ không dễ dàng như vậy để bắt đầu làm việc với bất kỳ dự án hiện có nào khác.

Backward Compatibility

Chúng tôi đã có AngularJS, Angular2 và bây giờ là Angular4. AngularJS và Angular2 có sự khác biệt lớn. Ứng dụng dự án được phát triển trong AngularJS không thể được chuyển đổi sang Angular2 vì sự khác biệt cốt lõi.

Phiên bản gần đây của VueJS là 2.0 và nó có khả năng tương thích ngược tốt. Nó cung cấp tài liệu tốt, rất dễ hiểu.

Typescript

Angular sử dụng TypeScript để viết mã. Người dùng cần có kiến ​​thức về Typecript để bắt đầu với Angular. Tuy nhiên, chúng ta có thể bắt đầu với mã hóa VueJS ở bất kỳ đâu trong jsfiddle hoặc codepen bằng cách sử dụng thư viện cdn. Chúng tôi có thể làm việc với JavaScript chuẩn, rất dễ bắt đầu.

VueJS v / s Ember

Similarities

Ember cung cấp công cụ dòng lệnh Ember, tức là ember-cli để dễ dàng cài đặt và biên dịch cho các dự án Ember.

VueJS cũng có một công cụ dòng lệnh vue-cli để bắt đầu và xây dựng các dự án.

Cả hai đều có các tính năng như bộ định tuyến, mẫu và các thành phần làm cho chúng rất phong phú như khung giao diện người dùng.

Performance

VueJS có hiệu suất tốt hơn so với Ember. Ember đã thêm một công cụ kết xuất lấp lánh với mục đích cải thiện hiệu suất kết xuất, đây là một khái niệm tương tự như VueJS và React sử dụng DOM ảo. Tuy nhiên, VueJS có thành tích tốt hơn khi so sánh với Ember.

VueJS v / s Knockout

Knockout cung cấp một hỗ trợ trình duyệt tốt. Nó được hỗ trợ trên phiên bản IE thấp hơn trong khi VueJS không được hỗ trợ trên IE8 trở xuống. Quá trình phát triển Knockout đã chậm lại theo thời gian. Không có nhiều phổ biến cho cùng một trong thời gian gần đây.

Mặt khác, VueJS đã bắt đầu trở nên phổ biến với việc nhóm Vue cung cấp các bản cập nhật thường xuyên.

VueJS v / s Polyme

Thư viện polyme đã được phát triển bởi Google. Nó được sử dụng trong nhiều dự án của Google như Google I / O, Google Earth, Google Play Âm nhạc, v.v. Nó cung cấp các thuộc tính liên kết dữ liệu và tính toán tương tự như VueJS.

Định nghĩa phần tử tùy chỉnh polyme bao gồm JavaScript / CSS thuần túy, thuộc tính phần tử, lệnh gọi lại vòng đời và các phương thức JavaScript. Trong khi đó, VueJS cho phép dễ dàng sử dụng JavaScript / html và CSS.

Polymer sử dụng các tính năng của thành phần web và yêu cầu polyfills cho các trình duyệt không hỗ trợ các tính năng này. VueJS không có những phụ thuộc như vậy và hoạt động tốt trên tất cả các trình duyệt từ IE9 +.