Với sự gia tăng liên tục của các khung JavaScript frontend, bao gồm cả Vue.js 3 mới, điều quan trọng là phải theo kịp chúng và hiểu tất cả về các tính năng mới của chúng.

Trong bài viết này, chúng ta sẽ khám phá Vue.js 3 và các tính năng mới được bổ sung của nó. Những bổ sung mới nhất này làm cho Vue.js thậm chí còn mạnh mẽ hơn, khiến nó trở thành một khuôn khổ tuyệt vời để xem xét cho dự án tiếp theo của bạn. Bạn sẽ tìm hiểu chi tiết 10 điều bạn nên biết về Vue.js và cách nó sẽ giúp bạn cung cấp các ứng dụng giao diện người dùng có khả năng mở rộng và hiệu suất cao.

Sẳn sàng? Đi nào!

Vue.js là gì?

Theo Evan You, tác giả của Vue.js:

“Vue.js là một giải pháp linh hoạt hơn, ít cố chấp hơn. Nó chỉ là một lớp giao diện để bạn có thể sử dụng nó như một tính năng nhẹ trong các trang thay vì một SPA toàn diện. ”

Anh ấy muốn tạo ra một frontend framework mạnh mẽ như Angular, nhưng cũng “nhẹ hơn” và linh hoạt hơn mà không có tất cả các plugin và khái niệm không cần thiết đi kèm với Angular.

Kết quả là Vue.js, một trong những khung công tác giao diện người dùng phổ biến nhất được sử dụng ngày nay.

State of JS 2020: Front-end Frameworks chart showing Vue.js in the second.
Vue.js là frontend framework phổ biến thứ hai. (Nguồn: State of JS 2020)

 

Tại sao các nhà phát triển sử dụng Vue.js

Các lý do khác nhau thúc đẩy một nhà phát triển sử dụng một công nghệ cụ thể. Hãy thảo luận tại sao chúng tôi nghĩ bạn nên học Vue.js.

Để bắt đầu, Vue.js là một trong những khung công tác đơn giản nhất hiện có cho hầu hết các nhà phát triển, vì khung công tác này sử dụng JavaScript. Do đó, bất kỳ ai có kiến thức JavaScript cơ bản sẽ có thể phát triển với Vue.js.

Công cụ Vue CLI kết hợp với các công cụ phát triển giao diện người dùng khác giúp việc thiết lập Vue.js trở nên dễ dàng. Nó được thiết lập với một số chức năng theo mặc định, nhưng bạn cũng có thể xây dựng mã với cấu trúc và logic KHÔ (Không lặp lại chính bạn).

Reactivity cũng được tích hợp trong Vue.js. Điều đó có nghĩa là chức năng thời gian thực phổ biến trên Angular framework sẽ trở nên dễ dàng với Vue.js. Ví dụ: bạn có thể dễ dàng áp dụng một chỉ thị đơn giản như v-if trong ứng dụng Vue.js của mình.

Tiếp theo, hãy thảo luận về những ưu và nhược điểm chính của Vue.js.

Ưu và nhược điểm của Vue.js

Vue.js là khung công tác phổ biến thứ hai được sử dụng hiện nay. Hãy xem điều gì khiến nó gắn bó với các nhà phát triển web và điều gì đã đẩy họ ra xa.

Vue.js Ưu điểm

Chúng ta sẽ bắt đầu bằng cách khám phá những khía cạnh tích cực của Vue.js.

Kích thước nhỏ

Vue.js có kích thước có thể tải xuống rất nhỏ, khoảng 18 KB, rất tuyệt vời so với các khung công tác khác có kích thước lớn. Tuy nhiên, với kích thước đó, Vue.js sẽ tác động tích cực đến SEO và UX của ứng dụng frontend của bạn.

Thành phần tệp đơn và khả năng đọc

Vue.js sử dụng kiến trúc dựa trên thành phần, do đó tách các đoạn mã lớn thành các thành phần nhỏ hơn. Ngoài ra, trong Vue.js, mọi thứ đều là một thành phần và mỗi thành phần được viết bằng HTML, CSS và JavaScript, do đó khuyến khích tính dễ đọc và đơn giản.

Hệ thống dụng cụ rắn

Vue.js hỗ trợ rất nhiều công cụ phát triển giao diện người dùng ngay lập tức mà không cần bạn phải cấu hình ít hoặc không cần cấu hình. Ví dụ, Vue.js hỗ trợ các công cụ như Babel và Webpack. Ngoài ra, nó cung cấp kiểm thử đơn vị, thư viện kiểm tra đầu cuối, hệ thống định tuyến linh hoạt và dễ sử dụng, trình quản lý trạng thái, kết xuất phía máy chủ (SSR), v.v.

Dễ sử dụng

Nếu bạn đã sử dụng Vue.js trước đây, bạn sẽ đồng ý rằng nó rất dễ sử dụng. Nó hiện đại hóa phương pháp phát triển web thông thường, giúp bất kỳ người mới bắt đầu nào cũng có thể dễ dàng tham gia và cảm thấy thoải mái chỉ với một vài thao tác thực hành.

Nhược điểm của Vue.js

Bây giờ chúng ta đã đề cập đến những ưu điểm, hãy cùng khám phá những tiêu cực của Vue.js.

Khả năng phản ứng phức tạp

Việc thực hiện ràng buộc hai chiều trong Vue.js là một công cụ tiện dụng để quản lý các thành phần Vue.js. Liên kết hai chiều đề cập đến việc chia sẻ dữ liệu giữa một lớp thành phần và mẫu của nó, nó được phát triển để nếu dữ liệu thay đổi ở một vị trí, nó sẽ tự động cập nhật các vị trí khác.

Tuy nhiên, có một vấn đề liên quan đến cách hoạt động của phản ứng trong khi hệ thống phản ứng chỉ hiển thị những phần dữ liệu được kích hoạt. Đôi khi, có một số sai sót trong quá trình đọc dữ liệu nên yêu cầu dữ liệu phải được làm phẳng. Bạn có thể đọc qua vấn đề đã biết này và cách nó được giải quyết trên trang web của Vue.js.

Rao chăn ngôn ngư

Ban đầu, Vue.js chủ yếu được áp dụng bởi người Trung Quốc, với các công ty lớn như Xiaomi và Alibaba đã giúp phổ biến khuôn khổ và tạo ra nhu cầu trên thị trường lao động. Tuy nhiên, với sự chấp nhận đáng kể từ nhiều công ty Trung Quốc, rất nhiều diễn đàn, kênh thảo luận và những thứ tương tự chủ yếu bằng tiếng Trung, khiến việc áp dụng khó khăn đối với các nhà phát triển không nói tiếng mẹ đẻ.

Cho đến ngày nay, điều này không còn xảy ra nữa vì Vue.js đã phát triển để kết hợp hỗ trợ nhiều ngôn ngữ, nhưng có một số ngôn ngữ hiện có ít hỗ trợ hơn những ngôn ngữ khác.

Rủi ro quá linh hoạt

Như đã nêu ở trên, Vue.js rất linh hoạt và dễ sử dụng. Do đó, thật dễ dàng để có rất nhiều mã spaghetti ở khắp mọi nơi vì mọi người trong nhóm doanh nghiệp có thể có ý kiến khác nhau về cách thực hiện công việc.

Từ những ưu và nhược điểm của Vue.js đã thảo luận ở trên, bạn có thể đã phát hiện ra một số tính năng bạn yêu thích và một số tính năng sẽ không hoạt động tốt cho bạn.

10 điều bạn nên biết về Vue.js

Dưới đây là mười điều bạn cần biết về Vue.js và tại sao bạn cần biết chúng.

Thuộc tính được tính toán

Thuộc tính tính toán là một trong những tính năng được sử dụng nhiều nhất trong Vue.js. Thuộc tính được tính toán cho phép bạn tạo các thuộc tính có thể sửa đổi, thao tác và hiển thị dữ liệu một cách hiệu quả và dễ đọc.

Nó rất hữu ích khi bạn muốn lặp lại nhiều phương pháp nhỏ cho những thứ như định dạng, thay đổi giá trị hoặc một quy trình rộng lớn mà bạn cần kích hoạt trong một số tình huống nhất định.

Các thuộc tính được tính toán giúp loại bỏ quá nhiều logic trong mẫu của bạn. Quá nhiều logic này có thể khiến mã của bạn trở nên cồng kềnh và khó bảo trì nhanh chóng.

Giả sử bạn muốn định dạng một chuỗi thành chữ in hoa, đây là cách bạn có thể thực hiện:

<template> <div> <p> I love {{ value.toUpperCase() }} </p> </div> </template>

Điều gì xảy ra nếu bạn cần thay đổi biến value ở 50 vị trí khác nhau? Đầy hơi, phải không? Chà, các thuộc tính được tính toán ở đây để giúp:

<template> <div> <p> I love {{ value }} </p> </div> </template> <script> export default { computed:{ value(){ return this.value.toUpperCase() } } } </script>

Bạn có thể dễ dàng thay đổi toUpperCase() thành toLowerCase() và nó sẽ phản ánh tất cả từ một điểm duy nhất.

Xử lý sự kiện

Vue.js giúp giao tiếp giữa con cái và cha mẹ trở nên dễ dàng với việc sử dụng $emitv-on . Nó trở nên dễ dàng và dễ dàng để xử lý giao tiếp giữa các cấu trúc phân cấp thành phần.

Hàm $emit chấp nhận hai tham số: một chuỗi cho tên và một giá trị tùy chọn sẽ được phát ra.

v-on:event-name được sử dụng ở thành phần con để nhận sự kiện do thành phần mẹ của nó phát ra:

<template> <section> <button @click="onClick">Add </button> </section> </template> <script> export default { name: "AddEvent", methods: { onClick() { this.$emit('add', this.data); } } } </script>

Khi bạn kích hoạt nút Add , phương thức onClick sẽ kích hoạt sự kiện $emit , sự kiện này sẽ tạo ra sự kiện add cho một thành phần con đang lắng nghe sự kiện add .

Hãy cùng xem cách lắng nghe một sự kiện:

<template> <section> <p v-show="showSaveMsg">This component is listening to the ADD event</p> <add-event v-on:add="onAdd"></add-event> </section> </template> <script> export default { data(){ return { showSaveMsg: false } }, components:{ AddEvent: () => import('./AddEvent') }, methods: { onAdd() { this.showSaveMsg = true; } } } </script>

Đoạn mã trên lắng nghe sự kiện add và phản hồi bằng cách thay đổi giá trị của showSaveMsg thành true , điều này sẽ hiển thị lại thông báo.

Đăng kí để nhận thư mới

Các thành phần tải / không đồng bộ lười biếng

Tải chậm là một trong những thủ thuật hiệu suất tốt nhất cho Vue.js, trong đó các thành phần được thêm và hiển thị không đồng bộ hoặc theo yêu cầu, điều này sẽ làm giảm đáng kể kích thước tệp, thời gian phản hồi yêu cầu HTTP, v.v.

Tải chậm được thực hiện với nhập động Webpack, cũng hỗ trợ tách mã.

Vue.js cho phép tải chậm các thành phần và có thể đạt được trên toàn cầu bằng các tập lệnh sau:

import Vue from "vue"; Vue.component("new-component", () => import("./components/NewComponent.vue"));

Bạn có thể đạt được nó cục bộ với một thành phần như sau:

<template> <div> <component></component> </div> </template> <script> export default { components: { 'Component': () => import('./Component') } } </script>

Thành phần toàn cầu

Chúng tôi có thể đạt được khả năng tái sử dụng đáng kể trong Vue.js với các thành phần toàn cầu, nơi bạn đăng ký một thành phần một lần và sau đó sử dụng nó ở mọi nơi trong phiên bản Vue.js của bạn.

Các thành phần chung là một tính năng quan trọng và có thể giúp bạn tiết kiệm rất nhiều thời gian khi đăng ký từng thành phần riêng lẻ, nhưng nó có thể dễ dàng bị lạm dụng khi đăng ký tất cả các thành phần trên toàn cầu. Đăng ký tất cả các thành phần trên toàn cầu có thể dễ dàng dẫn đến kích thước bản dựng lớn dẫn đến SEO kém và thời gian tải trang chậm hơn.

Đảm bảo luôn đăng ký các thành phần chung có nhiều trường hợp sử dụng trong dự án của bạn như được hiển thị bên dưới:

import Vue from "vue"; Vue.component("new-component", () => import("./componetns/NewComponent.vue"));

Thành phần tệp đơn

Một trong những tính năng mạnh mẽ nhất của Vue.js là Thành phần; nó giúp bạn mở rộng các phần tử HTML, CSS và JavaScript cần thiết để đóng gói mã có thể sử dụng lại.

Các thành phần có thể giúp chia nhỏ các dự án lớn thành các phần nhỏ hơn, có thể tái sử dụng mà chúng ta có thể mở rộng trên toàn bộ dự án, do đó khuyến khích nguyên tắc KHÔ (Không lặp lại bản thân) của kỹ thuật phần mềm.

Nó có thể cung cấp tổ chức và đóng gói cho các dự án lớn, mã có thể sử dụng lại và có thể được tách thành các tệp .vue .

<template> <section> <button @click="onClick">Add</button> </section> </template> <script> export default { name: "CustomButtom", methods: { onClick() { this.$emit('add', this.data); } } } </script> <style scoped> button{ /** Button Styles */ } </style>

Các tập lệnh trên tạo một thành phần nút tùy chỉnh mà chúng tôi có thể sử dụng lại trong dự án của mình. Mỗi thành phần có HTML, CSS và JavaScript.

Thử nghiệm

Vue.js cung cấp một trong những thư viện thử nghiệm mạnh mẽ nhất, giúp cho việc thử nghiệm đơn vị với Jest và Mocha hoặc thử nghiệm end-to-end trở nên dễ dàng với ít hoặc không cần cấu hình.

Bạn có thể xem nhanh thử nghiệm với những công cụ này. Vì vậy, hãy cùng khám phá cài đặt, thiết lập và thử nghiệm một dự án demo bên dưới.

Nếu bạn đang sử dụng công cụ Vue CLI được đề xuất để thiết lập dự án của mình, hãy chạy các lệnh sau:

Bạn mệt mỏi với việc hỗ trợ lưu trữ WordPress subpar mà không có câu trả lời? Hãy thử nhóm hỗ trợ đẳng cấp thế giới của chúng tôi! Kiểm tra các kế hoạch của chúng tôi

vue add unit-jest //to run unit test with jest npm install --save-dev @vue/test-utils

Tiếp theo, sau khi thiết lập, hãy bao gồm đoạn mã dưới đây, minh họa cách kiểm tra một thành phần đơn giản:

// Import the `mount()` method from Vue Test Utils import { mount } from '@vue/test-utils' // The component to test const MessageComponent = { template: '<p>{{ message }}</p>', props: ['message'] } test('displays a message', () => { // mount() returns a wrapped Vue component we can interact with const wrapper = mount(MessageComponent, { propsData: { msg: 'Welcome to our testing world' } }) // Assert the rendered text of the component expect(wrapper.text()).toContain('Welcome to our testing world') })

Thư viện kiểm tra Vue có hai tùy chọn tuyệt vời để kiểm tra các thành phần của bạn: Mount và Shallow.

Nếu bạn muốn kiểm tra một thành phần với sự cách ly hoàn toàn, hãy sử dụng phương pháp shallow . Mặt khác, nếu bạn cần làm việc trên một thành phần với các thành phần phụ mà bạn muốn đảm bảo giao tiếp, tùy chọn mount hoạt động rất tốt.

Công cụ Vue CLI mạnh mẽ

Vue CLI là một công cụ CLI tuyệt vời và cung cấp rất nhiều quyền lực cho bất kỳ nhà phát triển Vue nào. Với nó, bạn có thể nhanh chóng kiểm tra bất kỳ thành phần nào một cách riêng biệt. Điều tuyệt vời về Vue CLI là bạn hoàn toàn có thể phát triển một thành phần riêng lẻ, kiểm tra nó và vẫn có quyền truy cập tải lại nóng khi bạn lặp lại thành phần cụ thể đó.

Để chứng minh, hãy cài đặt Vue CLI trên toàn cầu:

npm install -g @vue/cli

Tiếp theo, bạn có thể kiểm tra bất kỳ thành phần nào bằng cách chạy lệnh dưới đây:

vue serve ./components/views/Home.vue

Nếu bạn muốn rút ra một thành phần cụ thể, chẳng hạn như chia sẻ nó với đồng nghiệp của mình, bạn có thể đạt được điều đó bằng cách sử dụng lệnh bên dưới:

vue build --target lib --name goldenRule ./components/views/Home

Vue CLI rất mạnh mẽ và có thể tiết kiệm rất nhiều thời gian làm việc nếu bạn thành thạo nghệ thuật sử dụng nó. Nếu bạn muốn tìm hiểu thêm, bạn có thể xem qua tài liệu chính thức.

Quản lý đạo cụ

Quản lý đạo cụ rất quan trọng đối với thành phần Vue vì nó có thể được tạo theo nhiều cách khác nhau. Bạn cũng có thể xác thực các đạo cụ, tạo nhiều đạo cụ và sửa đổi chúng nếu cần.

Để tạo một thuộc tính mới trong một thành phần Vue, bạn có thể thực hiện theo nhiều cách khác nhau. Giả sử bạn có thành phần của mình, bạn cần tạo phần mềm hỗ trợ isAdmin .

Hãy xem những cách khác nhau mà bạn có thể làm:

<template> <section> <component v-if="isAdmin"></component> </section> </template> <script> export default { name: 'Component', // One props: { isAdmin: { type: Boolean, default: false, required: true } }, // Two props: ['isAdmin'], // Three props: { isAdmin: Boolean } } </script>

Xác thực chỗ dựa của bạn là rất quan trọng. May mắn thay, nó cũng rất đơn giản:

// ... // One props: { isAdmin: { default: false, required: true, validator: function(value) { return typeof === 'boolean'; } } }, // ...

Cuối cùng, việc sửa đổi các đạo cụ cũng dễ dàng như chỉ cần điều chỉnh lại các giá trị của chúng:

//... methods: { isAdmin() { this.isAdmin = true; } } //..

Để gán giá trị cho phần hỗ trợ trong thành phần mẹ:

<template> <section> <component :isAdmin="true"></component> </section> </template>

Hiển thị phía máy chủ (SSR)

Với tất cả các tính năng và lợi ích tuyệt vời của việc sử dụng Vue.js để tạo các ứng dụng giao diện người dùng, bản thân Vue.js vẫn là một thư viện phía máy khách chỉ hiển thị và thao tác các phần tử DOM.

Kết xuất phía máy chủ giúp các khung phía máy khách như Vue.js đạt được hiệu quả tốt hơn. Trình thu thập thông tin của Công cụ Tìm kiếm sẽ thấy các trang được hiển thị đầy đủ trên trang web của bạn khi thu thập thông tin.

Để trang web của bạn được Google và Bing lập chỉ mục nhanh hơn, trang web của bạn cần có điểm số thời gian cho nội dung nhanh hơn và cao hơn. Đó là những gì kết xuất phía Máy chủ trong Vue.js giúp bạn đạt được.

Kết xuất phía máy chủ (SSR) là một kỹ thuật phổ biến để hiển thị một ứng dụng trang đơn phía máy khách thông thường (SPA) trên máy chủ và sau đó gửi một trang được kết xuất đầy đủ cho người đọc.

Khi trang được hiển thị ở phía máy chủ, nó sẽ gửi nó đến máy khách dưới dạng phản hồi. Do đó, mọi phần thông tin đã được hiển thị trong khi trình duyệt hiển thị trang công cụ tìm kiếm.

Đạt được SSR trong Vue.js rất khó đối với người mới bắt đầu. Sẽ dễ dàng hơn khi sử dụng Nuxt.js, có một SSR tích hợp và đường cong học tập rất thấp.

Triển khai

Vue.js sẽ đưa ra nhiều cảnh báo, lỗi và kích thước tệp cồng kềnh trong quá trình phát triển, nhưng những vấn đề này sẽ biến mất ngay lập tức khi bạn bật sản xuất để triển khai. Vue.js sẽ tự động định cấu hình các công cụ xây dựng Webpack, tiểu thuyết, trích xuất và xóa CSS, bộ nhớ đệm, theo dõi lỗi thời gian chạy, v.v.

Khách hàng của Kinsta có thể cân nhắc sử dụng tính năng thu nhỏ mã tích hợp mà họ có thể truy cập trực tiếp trong bảng điều khiển MyKinsta. Điều này cho phép họ dễ dàng kích hoạt tính năng thu nhỏ CSS và JavaScript tự động chỉ với một cú nhấp chuột đơn giản.

Vue.js làm cho quá trình triển khai của bạn trở nên rất dễ dàng bằng cách tự động định cấu hình và thiết lập môi trường sản xuất mà không cần bất kỳ bước bổ sung nào từ nhà phát triển.

Để triển khai ứng dụng Vue.js của bạn, bạn có thể đọc qua các hướng dẫn chung của nó.

Bản tóm tắt

Trong bài viết này, chúng tôi đã khám phá chi tiết Vue.js là gì, tại sao bạn nên sử dụng nó, ưu nhược điểm của nó và 10 điều bạn nên biết về nó.

Hy vọng rằng bạn đã nâng cao kiến thức của mình về Vue.js để cung cấp các ứng dụng giao diện người dùng có thể mở rộng và hiệu suất cao.

Tiếp tục viết mã!

Nếu bạn có câu hỏi hoặc đề xuất, chúng tôi mong muốn được nghe ý kiến từ bạn. Nói chuyện với chúng tôi trong phần bình luận bên dưới!


Tiết kiệm thời gian, chi phí và tối đa hóa hiệu suất trang web với:

  • Trợ giúp tức thì từ các chuyên gia lưu trữ WordPress, 24/7.
  • Tích hợp Cloudflare Enterprise.
  • Tiếp cận khán giả toàn cầu với 34 trung tâm dữ liệu trên toàn thế giới.
  • Tối ưu hóa với Giám sát Hiệu suất Ứng dụng được tích hợp sẵn của chúng tôi.

Tất cả những điều đó và hơn thế nữa, trong một kế hoạch không có hợp đồng dài hạn, hỗ trợ di chuyển và đảm bảo hoàn tiền trong 30 ngày. Kiểm tra các kế hoạch của chúng tôi hoặc nói chuyện với bộ phận bán hàng để tìm ra kế hoạch phù hợp với bạn.