Các công cụ và thực hành để tăng tốc quá trình phát triển Vue.js

[theanh]

Trong suốt hướng dẫn này, chúng ta sẽ xem xét các thực hành nên áp dụng, những điều nên tránh và xem xét kỹ hơn một số công cụ hữu ích giúp viết Vue.js dễ dàng hơn. Tôi sẽ tập trung chủ yếu vào Vue 2 vì hầu hết mọi người và tổ chức vẫn sử dụng phiên bản cũ hơn. Tuy nhiên, không có lý do gì để lo lắng, vì hầu hết những điều được đề cập ở đây vẫn áp dụng cho Vue 3 vì đây chỉ là phiên bản được tăng tốc và nhanh hơn. Tuy nhiên, nếu bạn đã biết về Vue 2 và chỉ muốn tìm hiểu về những điểm mới trong Vue 3, thì bạn có thể xem hướng dẫn di chuyển để tìm hiểu thêm.

Lưu ý: Bài viết này dành cho cả người mới bắt đầu và nhà phát triển dày dạn kinh nghiệm muốn cải thiện kỹ năng Vue.js của mình. Kiến thức cơ bản về JavaScript và Vue.js sẽ rất có ích khi bạn thực hiện hướng dẫn này.

Cấu trúc dự án dựa trên mô-đun so với dựa trên tệp​

Chúng ta hãy bắt đầu bằng cách xem cách cấu trúc tệp theo mô-đun, tại sao cấu trúc dựa trên tệp có thể không phải là ý tưởng hay khi xây dựng các dự án quy mô lớn và cách cấu trúc mô-đun để phù hợp với các yêu cầu kinh doanh.

Vì chúng ta mới tạo một dự án bằng Vue.js CLI, nên chúng ta sẽ nhận được cấu trúc tệp mặc định đã được nhóm Vue.js lập bản đồ. Sử dụng cấu trúc tệp được đề xuất không phải là cách tồi để cấu trúc dự án của bạn, nhưng khi dự án của bạn phát triển, bạn sẽ cần một cấu trúc tốt hơn vì mã của bạn trở nên tập trung và khó điều hướng và truy cập tệp hơn.

Đây là lúc phương pháp cấu trúc dự án dựa trên mô-đun phát huy tác dụng.

Một cách tồi để cấu trúc dự án của bạn sẽ liên quan đến việc lưu trữ dữ liệu khác nhau không liên quan đến cùng một thư mục, chẳng hạn như thành phần thông báo và thành phần xác thực trong thư mục thành phần gốc:

+-- src/| +-- asset/| +-- logo.png| +-- userprofile.png| +-- components| +-- NotificationBar.vue| +-- LoginForm.vue| +-- DashboardInfo.vue| +-- AuthenticationModal.vue| +-- main.js

Vì vậy, những gì chúng ta muốn làm là tách rời dự án dựa trên logic kinh doanh và các mối quan tâm để chúng ta có thứ gì đó như mô-đun xác thực, mô-đun sản phẩm, mô-đun dịch vụ, v.v. Theo cách này, chúng ta có thể đảm bảo rằng bất kỳ thứ gì liên quan đến tính năng cụ thể đó đều được đưa vào mô-đun, giúp mã của chúng ta gọn gàng hơn và việc điều hướng không quá khó khăn.

+-- modules/| +-- AuthModule/| +-- asset/| +-- userprofile.png| +-- Components/| +-- Authentication.vue| +-- login.vue| +-- NotificationModule| +-- asset/| +-- Alert.png| +-- Components/| +-- NotificationBar.vue| +-- ProductModule/

Tổ chức các Module​

Có hai cách để bạn có thể tổ chức các module của mình:

1. Các module cốt lõi của Vue.js,
2. Các module tính năng của ứng dụng.

Các module cốt lõi của Vue.js ở đây để tạo điều kiện thuận lợi cho quá trình phát triển Vue.js của bạn. Các module như module dịch vụ chứa tất cả các yêu cầu mạng mà công ty cần được lưu giữ trong module cốt lõi này và tất cả các yêu cầu mạng tương ứng được thực hiện từ đây.

Việc mô-đun hóa ứng dụng của bạn theo các tính năng là một cách tuyệt vời để tạo ra cấu trúc tệp tốt hơn trong ứng dụng của bạn. Điều này sẽ cho phép tách biệt mối quan tâm của bạn và đảm bảo rằng bạn chỉ làm việc trên tính năng mà bạn hoặc nhóm của bạn được giao. Một lợi thế khác của việc mô-đun hóa theo tính năng là khả năng bảo trì và tránh nợ kỹ thuật trong dài hạn khi có thể cần phải làm lại ứng dụng.

Bây giờ, bất cứ khi nào cần thêm, xóa hoặc thay đổi trạng thái của một tính năng cụ thể, tất cả những gì chúng ta cần làm là điều hướng đến tính năng đó và thực hiện các thay đổi mà không làm hỏng ứng dụng. Phương pháp mô-đun hóa này cho phép phát triển chương trình hiệu quả và dễ dàng gỡ lỗi và sửa đổi trong ứng dụng của chúng ta.

Ví dụ: tính năng thanh toán được chỉ định cho bạn và nhóm của bạn là thời điểm thích hợp để triển khai mô-đun thanh toán đóng gói tất cả các chức năng và dữ liệu cho tính năng đó.

+-- modules/| +-- payout/| +-- index.js| +-- asset/| +-- Components/| +-- PayOut.vue| +-- UserInfo.vue| +-- store/| +-- index.js| +-- actions.js| +-- mutation.js| +-- Test/

Dựa trên tính năng thanh toán ở trên, chúng tôi có tệp index.js để nhập và sử dụng các plugin chỉ liên kết với mô-đun thanh toán. Thư mục tài sản chứa tất cả các tài sản (hình ảnh và kiểu) cho mô-đun. Thư mục thành phần của chúng tôi chứa các thành phần liên quan đến tính năng thanh toán. Thư mục lưu trữ chứa các hành động, đột biến và trình lấy dữ liệu của chúng tôi được sử dụng để quản lý trạng thái của tính năng này. Ngoài ra còn có một thư mục thử nghiệm để thực hiện thử nghiệm cho tính năng này.

Sử dụng Chỉ thị Tùy chỉnh​

Chỉ thị trong Vue.js là cách để chúng ta yêu cầu Vue.js thực hiện một việc gì đó hoặc thể hiện một hành vi nhất định cho chúng ta. Ví dụ về chỉ thị là v-if, v-model, v-for, v.v. Trong ứng dụng Vue.js của chúng ta, khi chúng ta sử dụng một cái gì đó như v-model để liên kết dữ liệu với một đầu vào trong biểu mẫu, chúng ta đang cung cấp cho mã Vue.js một số hướng dẫn nhất định đặc biệt đối với Vue.js. Nhưng nếu chúng ta muốn một hành động hoặc hành vi cụ thể mà chỉ thị Vue.js cung cấp không cho phép chúng ta thực hiện thì chúng ta phải làm gì? Chúng ta có thể tạo ra những gì chúng ta gọi là chỉ thị tùy chỉnh.

Đăng ký chỉ thị tùy chỉnh và móc chỉ thị​

Chúng ta có thể đăng ký chỉ thị theo hai cách:

1. Toàn cầu
   Trong tệp main.js của chúng ta.
2. Cục bộ
   Trong thành phần của chúng ta.

Các móc trong chỉ thị giống như các phương thức kích hoạt khi một hành động nhất định xảy ra trong các chỉ thị của chúng ta. Giống như các móc vòng đời móc created và mount, chúng ta được cung cấp các móc để sử dụng trong các chỉ thị của mình.

Giả sử chúng ta đang xây dựng một ứng dụng và trong một trong các trang của mình, chúng ta muốn màu nền luôn thay đổi mỗi khi chúng ta điều hướng đến ứng dụng đó. Chúng ta sẽ đặt tên cho chỉ thị này là colorChange. Chúng ta có thể thực hiện điều đó với sự trợ giúp của một chỉ thị.

Mẫu của chúng ta trông giống như thế này:

Chúng ta có thể thấy chỉ thị tùy chỉnh ở trên, nhưng để nó hoạt động, trong tệp main.js của chúng ta, chúng ta thêm:

// chỉ thị tùy chỉnhVue.directive("color-change", { bind: function (el) { const random = Math.floor(Math.random() * 900000) + 100000; el.style.backgroundColor = `#${random}` }})

Chỉ thị Vue.js ở trên lấy tên chỉ thị làm đối số đầu tiên, sau đó là Object làm đối số thứ hai để điều khiển hành vi của các chỉ thị. bind là một trong những hook mà chúng ta đã nói đến và sẽ được gọi sau khi chỉ thị được liên kết với phần tử. Nó chấp nhận các đối số sau:

• el
  Đây là nút phần tử mà chúng ta đã đính kèm chỉ thị vào.
• binding
  Nó chứa các thuộc tính hữu ích giúp thay đổi hành vi của chỉ thị.
• vnode
  Đây là nút ảo của Vue.js.

Chúng ta đã tạo một tập hợp ngẫu nhiên gồm 6 chữ số để có thể sử dụng nó khi thay đổi mã hex của kiểu màu nền.

Các phương pháp hay nhất khi viết chỉ thị tùy chỉnh​

Chúng ta đã tạo một chỉ thị tùy chỉnh cho mục đích trên, nhưng chúng ta cần lưu ý một số điều. Ngoài el, không bao giờ sửa đổi các đối số hook và đảm bảo các đối số chỉ đọc vì các đối số hook là các đối tượng có phương thức gốc có thể gây ra các tác dụng phụ nếu sửa đổi. Nếu cần, hãy sử dụng tập dữ liệu Vue.js để chia sẻ thông tin giữa các hook.

Nếu chúng ta sử dụng bản dựng CLI của Vue.js, các chỉ thị tùy chỉnh phải nằm trong tệp main.js để tất cả các tệp .vue có thể truy cập vào tệp đó. Tên chỉ thị của bạn phải là tên liên quan đến chức năng của chỉ thị đó, mô tả rất chi tiết về chức năng của chỉ thị.

Bạn có thể xem và chơi nhiều hơn với mã trong codesandbox này mà tôi đã tạo. Bạn cũng có thể đọc thêm về điều này trong tài liệu Vue.
https://codesandbox.io/embed/boring-paper-ox1mg?fontsize=14&hidenavigation=1&theme=dark

Kiểm soát các bản cập nhật​

Hệ thống phản ứng của Vue.js rất mạnh mẽ ở chỗ nó có thể phát hiện những thứ cần cập nhật và cập nhật chúng mà không cần bạn là nhà phát triển phải làm gì cả. Ví dụ, hiển thị lại một trang mỗi khi chúng ta điều hướng đến trang đó. Đôi khi trường hợp có thể khác vì chúng ta có thể thấy mình đang viết mã yêu cầu chúng ta phải bắt buộc cập nhật.

Lưu ý: Nếu bạn thấy mình cần phải bắt buộc cập nhật, đây là trường hợp hiếm hoi, thì bạn có thể cần thực sự hiểu về Reactivity của Vue và cách sử dụng đúng props trong việc truyền dữ liệu động.

Bắt buộc cập nhật xảy ra​

Trong hầu hết các trường hợp, khi giá trị trong đối tượng dữ liệu vue thay đổi, chế độ xem sẽ tự động hiển thị lại, nhưng không phải lúc nào cũng như vậy. một trường hợp điển hình về chế độ xem của chúng ta, không phải kết xuất lại là khi chúng ta sử dụng v-for trong mẫu của mình để lặp qua một số dữ liệu trong đối tượng dữ liệu và chúng ta không thêm giá trị :key vào vòng lặp v-for.

Điều này cung cấp cho Vue.js một cách để theo dõi danh tính của từng nút và kết xuất lại chế độ xem cho bất kỳ thay đổi nào.

Một tình huống hiếm gặp có thể khiến chúng ta buộc cập nhật là nếu chúng ta cố ý hoặc vô tình đặt một mục mảng với chỉ mục.

var app = new Vue({ data: { items: ['1', '2'] }})app.items[1] = '7' //vue không nhận thấy bất kỳ thay đổi nào

Có nhiều cách khác nhau để buộc cập nhật hoặc kết xuất lại. Một số là những thực hành rất tệ như sử dụng v-if để kết xuất lại trang khi nó true và khi false, thành phần sẽ biến mất và không còn tồn tại nữa. Đây là thực hành tệ vì mẫu không bao giờ bị hủy mà chỉ ẩn cho đến khi có thể sử dụng lại.

  re-render

 export default { data() { return { show: true, }; }, methods: { rerender() { this.show= false; this.$nextTick(() => { this.show = true; }); } } };

Trong đoạn mã trên, trạng thái của show ban đầu được đặt thành true, nghĩa là thành phần của chúng ta được hiển thị ban đầu. Sau đó, khi chúng ta nhấp vào nút, hàm rerender() được gọi và trạng thái của show được đặt thành false và thành phần không còn được hiển thị nữa. Ở lần tích tiếp theo, là một chu kỳ cập nhật DOM duy nhất, show được đặt thành true và thành phần của chúng ta được hiển thị lại. Đây là một cách dựng lại rất hack.

Tôi muốn nói về hai cách hợp lệ để thực hiện điều này:

1. $forceUpdate của Vue.
2. Mẫu thay đổi khóa.

$forceUpdate của Vue: Khi sử dụng $forceUpdate, các thành phần con không được dựng, chỉ có phiên bản Vue.js, phiên bản và các thành phần con có khe cắm.

Chúng ta có thể buộc cập nhật trên toàn cục:

import Vue from 'vue';Vue.forceUpdate();

Và cục bộ nữa:

export default { methods: { methodThatForcesUpdate() { this.$forceUpdate(); } }}

Sử dụng mẫu thay đổi khóa tốt hơn nhiều so với phương thức $forceUpdate là một cách khác để thực hiện việc này. Lý do đằng sau mẫu thay đổi khóa tốt hơn là nó cho phép Vue.js biết thành phần nào được liên kết với dữ liệu cụ thể và khi khóa thay đổi, nó sẽ hủy thành phần cũ để tạo thành phần mới, theo matthiasg về sự cố Github này mà tôi gặp phải. Bạn có thể sử dụng thuộc tính :key để cho Vue.js biết thành phần nào được liên kết với một phần dữ liệu cụ thể. Khi khóa thay đổi, nó sẽ khiến Vue.js hủy thành phần cũ và tạo thành phần mới.

  export default { data() { return { key: 0, }; }, methods: { forceRerender() { this.key += 1; } } }

Third Party Libraries And Optimization​

Gần như không thể tránh khỏi việc chúng ta không sử dụng các thư viện của bên thứ ba trong các ứng dụng của mình. Các thư viện của bên thứ ba có thể bắt đầu trở thành vấn đề nếu chúng ta không để ý đến chúng, làm tăng kích thước gói và làm chậm ứng dụng của chúng ta.

Gần đây, tôi đã sử dụng thư viện thành phần Vuetify trong một dự án và kiểm tra xem kích thước gói tổng thể đã giảm xuống còn 500kb. Những thứ như thế này có thể trở thành nút thắt cổ chai trong ứng dụng của chúng ta. Bạn có thể kiểm tra kích thước gói của ứng dụng bằng cách sử dụng webpack-bundle-analyzer. Bạn có thể cài đặt bằng cách chạy:

npm install --save-dev webpack-bundle-analyzer

và đưa nó vào tệp cấu hình webpack của bạn:

const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;module.exports = { plugins: [ new BundleAnalyzerPlugin() ]}

Thực hành tốt để tối ưu hóa ứng dụng Vue của bạn​

• Gói chính của chúng ta chỉ nên chứa các phụ thuộc quan trọng đối với ứng dụng của chúng ta, như vue, vuex. Chúng ta nên tránh đặt các thư viện được sử dụng trong các tuyến đường cụ thể trong ứng dụng của mình vào gói chính.
• Khi sử dụng các thư viện thành phần, bạn có thể nhập các thành phần riêng lẻ từ các thư viện, thay vì nhập mọi thứ. Ví dụ: vuetify:

        import { VApp, VNavigationDrawer, VAppBar } from 'vuetify/lib'export default { components: { VApp, VNavigationDrawer, VAppBar, }}

Bằng cách thực hiện những điều trên, chúng ta đã giảm kích thước bundle và code dư thừa, chỉ sử dụng các thành phần mà chúng ta muốn sử dụng trong route cụ thể đó.

Ra quyết định sớm để sử dụng Vuex​

Tôi thường tự hỏi liệu mình có nên bắt đầu một dự án bằng Vuex không. Đôi khi tôi chỉ muốn bắt đầu một dự án phụ nhỏ và tôi bắt đầu mà không có Vuex để quản lý trạng thái của mình và giao tiếp bằng props bắt đầu trở nên lộn xộn.

Vậy khi nào chúng ta nên sử dụng Vuex? Để trả lời câu hỏi này, chúng ta cần xem xét:

• Kích thước của dự án,
• Tính đơn giản của mã,
• Định tuyến,
• Bộ dữ liệu liên quan,
• Lồng ghép các thành phần.

Nếu ứng dụng của bạn bắt đầu phát triển, chỉ nên đưa Vuex vào để quản lý trạng thái trong ứng dụng của bạn. Nếu bạn từng nghi ngờ liệu mình có nên sử dụng trình quản lý trạng thái khi bắt đầu dự án hay không, thì hãy sử dụng nó. Tuy nhiên, có một cuộc thảo luận về API thành phần Vue3 mới sẽ thay thế cho vuex.

Vuex nên được thiết lập như thế nào cho các ứng dụng lớn​

Chúng ta có bốn thành phần trong kho vuex:

• Trạng thái: Lưu trữ dữ liệu trong kho của chúng ta.
• Trình lấy: Truy xuất dữ liệu trạng thái.
• Đột biến: Được sử dụng để đột biến dữ liệu trạng thái.
• Hành động: Được sử dụng để cam kết đột biến.

Khi sử dụng những điều trên trong Vuex, chúng ta nên nhớ rằng các hành động luôn phải cam kết đột biến bất kể điều gì xảy ra. Điều này cho phép devtools của chúng tôi có thể theo dõi các thay đổi và hoàn nguyên về một khoảng thời gian cụ thể trong trạng thái của chúng tôi và các hoạt động không đồng bộ hoặc logic kinh doanh phải được thực hiện trong các hành động.

Bạn có thể tạo một tệp riêng cho từng thành phần Vuex trông như thế này:

├── services├── main.js└── store ├── index.js ├── actions.js ├── mutation.js └── Getters.js├── components

Moduling Theo Tính Năng​

Nếu dự án của chúng ta là một dự án rất lớn với một nhóm, chúng ta có thể mô-đun hóa cửa hàng của mình theo các tính năng của ứng dụng. Điều này được thực hiện đặc biệt khi có các dự án phức tạp và lớn với nhiều tệp và thư mục và chúng ta chỉ muốn có một cách có tổ chức để xử lý cấu trúc của ứng dụng. Chúng ta phải cẩn thận khi thực hiện việc này, nếu không chúng ta có thể gây hại nhiều hơn là có lợi. Một cửa hàng đơn giản được mô-đun hóa theo tính năng trông như thế này:

store/ ├── index.js └── modules/ ├── cart ├── index.js ├── actions.js ├── mutation.js ├── product.js ├── login.js

Thực hành tốt khi sử dụng mô-đun Vuex​

Vì các mô-đun chúng ta đã tạo trở nên phức tạp hơn, nên việc nhập và sắp xếp thủ công trở nên khó khăn hơn. Bạn nên có tệp index.js ở gốc mô-đun, tập hợp tất cả các tệp lại với nhau.

Đảm bảo rằng bạn có một mẫu đặt tên chuẩn trong cửa hàng của mình vì điều này sẽ tăng khả năng bảo trì. Bạn có thể sử dụng camelCase để đặt tên cho các mô-đun sau đó là phần mở rộng .store.js. Ví dụ: CartData.store.js.

modules/ ├── cart.js ├── index.js -> auto export module ├── userProduct.store.js ├── userData.store.js

Mã liên quan đến logic kinh doanh hoặc mã bất đồng bộ không nên chạy bên trong các đột biến vì hành vi chặn của nó, thay vào đó, nên sử dụng các hành động. Người ta cho rằng thực hành tốt nhất là không truy cập trực tiếp vào một đối tượng trạng thái. Thay vào đó, hãy sử dụng hàm getter vì nó có thể được ánh xạ vào bất kỳ thành phần vue nào bằng cách sử dụng mapGetters hoạt động như một thuộc tính được tính toán với kết quả của các getter được lưu trong bộ nhớ đệm dựa trên các phụ thuộc của nó. Ngoài ra, hãy đảm bảo mỗi mô-đun được đặt tên theo không gian và không truy cập chúng bằng phạm vi trạng thái toàn cục.

Sử dụng phương pháp Provide/Inject để truyền dữ liệu​

Hãy nghĩ đến một ứng dụng có nhiều thành phần khác nhau. Chúng ta có thành phần cha và thành phần cha có nhiều thành phần con. Từ hình ảnh bên dưới, chúng ta thấy Thành phần con A, B và D là các thành phần hàng đầu, sau đó chúng ta thấy Thành phần E lồng vào thành phần D và thành phần F lồng vào thành phần E. Nếu chúng ta có dữ liệu ứng dụng (như Địa chỉ người dùng) mà chúng ta muốn sử dụng trong Thành phần con A, C và F và dữ liệu Địa chỉ người dùng này nằm trong thành phần cha của chúng ta thì sao.



Để thực hiện điều này, chúng ta cần:

• Cung cấp giá trị trong thành phần cha (Nhà cung cấp phụ thuộc).
• Tiêm giá trị vào thành phần F (người tiêu dùng phụ thuộc).

Trong thành phần cha của chúng ta, chúng ta cung cấp dữ liệu:

app.component('parent-component', { data() { return { user: {name:"Uma Victor", address:"No 33 Rumukwurushi"} } }, provide() { return { userAddress: this.user.address } }, template: ` ... `})

Chúng tôi sử dụng provide như một hàm bằng cách trả về một đối tượng để truy cập các thuộc tính thể hiện của thành phần.

Trong thành phần child-f của chúng tôi, chúng tôi có những nội dung sau:

app.component('child-f', { inject: ['userAddress'], template: ` [HEADING=2]Thuộc tính được tiêm: {{ this.userAddress }}[/HEADING] `})

Tuy nhiên, chúng tôi nhận thấy rằng nếu chúng tôi thay đổi user.address thành một địa chỉ khác, thay đổi sẽ không được phản ánh trong giá trị được inject của chúng tôi, điều này là do dữ liệu được cung cấp cho provide/inject ban đầu không phản ứng. Chúng tôi có thể khắc phục điều này bằng cách truyền đối tượng reactive cho provide. Chúng ta phải gán một thuộc tính được tính toán cho đối tượng người dùng của mình.

app.component('parent-component', { data() { return { user: {name:"Uma Victor", address:"No 33 Rumukwurushi"} } }, provide() { return { userAddress: Vue.computed(() => this.user) } }, template: ` ... `})

Mẫu này có thể rất hữu ích và đơn giản hơn so với việc sử dụng Vuex.

Tuy nhiên, với Vue3 và bản nâng cấp gần đây, giờ đây chúng ta có thể sử dụng các nhà cung cấp ngữ cảnh, cho phép chúng ta chia sẻ dữ liệu giữa nhiều thành phần giống như vuex.

Sử dụng đúng props cho các thành phần biểu mẫu​

Xây dựng biểu mẫu trên web là một trong những việc không phải ai cũng thích làm. Vue.js giúp việc xây dựng các form tuyệt vời trở nên dễ dàng. Để đạt được điều này, chúng ta cần biết cách sử dụng đúng props trong các thành phần form của mình. Trong một ứng dụng truyền thống, nơi chúng ta có trang đăng ký, đăng nhập hoặc trang sản phẩm, chúng ta muốn có hành vi và thiết kế nhất quán. Ví dụ, trang đăng nhập bên dưới.



Với mã:

   Tên của bạn  Địa chỉ email của bạn  Mật khẩu của bạn    export default { data() { return { userData: { name: '', email: '', password: '' } } }, }

Chúng tôi muốn có một thành phần BaseInput mà chúng tôi có thể sử dụng cho ba đầu vào biểu mẫu ở trên. BaseInput của chúng tôi trông như thế này:

  {{ label }}   export default { props: { label: { type: String, default: "" }, value: [String, Number] }, methods: { updateInput(event) { this.$emit('input', event.target.value) } } }

Chúng ta muốn BaseInput của mình chấp nhận prop label luôn là một chuỗi và nếu Input có nhãn, chúng ta sẽ hiển thị nhãn đó trong mẫu của mình như chúng ta có thể thấy ở trên.

Khi chúng ta điền vào biểu mẫu, phương thức updateInput sẽ được kích hoạt. Phương thức updateInput lấy sự kiện input làm đối số và phát ra sự kiện có tên là Input, cùng với payload event.target.value là tên (John Doe) theo dạng:

v-model sẽ lắng nghe sự kiện input và sau khi nhận được, nó sẽ đặt userData.name của chúng ta thành payload mà nó nhận được.

Nếu chúng ta muốn đặt một placeholder cho một input, chúng ta có thể gặp lỗi, nguyên nhân là vì trong vue2, các thuộc tính luôn tự đính kèm vào phần tử cha, do đó để khắc phục lỗi này, chúng ta đặt inheritAttrs thành false và bind attrs.

 export default { heirAttrs: false, props: { label: { type: String, default: "" }, value: [String, Number] }, methods: { updateInput(event) { this.$emit('input', event.target.value) } } }

Đến nơi chúng ta muốn đặt thuộc tính giữ chỗ. Mã trang biểu mẫu của chúng ta trông như thế này:

Cuối cùng chúng ta cũng có một thành phần biểu mẫu độc lập có thể tái sử dụng. Bạn có thể chơi với mã trong codesandbox mà tôi đã tạo.

Lưu ý: $Attrs trong Vue3 hiện bao gồm tất cả các trình lắng nghe, ràng buộc kiểu và lớp của bạn.

Làm quen với Vue Devtools​

Vue.js Devtools là một công cụ rất mạnh mẽ vì nó giúp chúng ta gỡ lỗi ứng dụng của mình một cách hiệu quả theo thời gian thực. Nó mạnh mẽ nhất khi chúng ta sử dụng Vuex và chúng ta phải quản lý các đột biến và theo dõi các thay đổi trong ứng dụng của mình. Hầu hết các nhà phát triển Vue.js sử dụng devtools như một tiện ích mở rộng, nhưng chúng ta cũng có thể cài đặt nó như một ứng dụng độc lập.

Lưu ý: Các devtools Vue.js chỉ hoạt động ở chế độ phát triển bản dựng của bạn và sẽ không hoạt động trong chế độ sản xuất nên những người khác không thể sử dụng nó để kiểm tra ứng dụng của bạn.

Cài đặt Devtools như một ứng dụng độc lập​

Bạn có thể tự hỏi tại sao chúng ta lại muốn cài đặt một ứng dụng độc lập cho devtools khi chúng ta có thể sử dụng tiện ích mở rộng của trình duyệt cho ứng dụng đó? Bởi vì khi bạn cài đặt nó như một ứng dụng độc lập cục bộ, bạn có thể sử dụng nó từ bất kỳ trình duyệt nào.

Chúng tôi cài đặt nó:

// Toàn cầunpm install -g @vue/devtools// hoặc cục bộnpm install --save-dev @vue/devtools

Sau khi cài đặt xong, hãy chạy:

vue-devtools

Sau đó, trong tệp index.html của chúng tôi, nằm trong thư mục công khai trong gốc của ứng dụng Vue.js, chúng tôi thêm:

Sau khi ứng dụng của bạn được tải lại, nó sẽ tự động kết nối.

Một số Các thao tác chúng ta có thể thực hiện với Vue Devtools​

Dưới đây là một số thao tác hữu ích bạn có thể thực hiện trên Vue.js DevTools.

• Chủ đề tối
  Trong DevTools mới, hiện có tùy chọn để đặt giữa các chủ đề sáng, tối hoặc tương phản. Bạn có thể thực hiện việc này bằng cách vào cài đặt chung và chọn nó.

• Dòng thời gian
  Dòng thời gian mới trong devtools hiển thị thông tin về các sự kiện xảy ra và được sắp xếp theo thứ tự thời gian. Nó nằm cạnh chế độ xem thanh tra và cài đặt.

• Định dạng tên thành phần
  Bạn có thể chọn hiển thị tên thành phần của mình theo kiểu camelCase hoặc kebab-case.

Có nhiều thao tác khác mà bạn có thể sử dụng trong vue devtools. Bạn có thể xem changelog của họ.

Các công cụ giúp công việc trong Vue dễ dàng hơn​

Khi làm việc với Vuejs, chúng ta có thể gặp một số tính năng mà chúng ta muốn triển khai, nhưng có thể mất nhiều thời gian để mã hóa cứng hoặc chỉ hơi khó triển khai một chút. Là các nhà phát triển chuyên nghiệp, chúng ta thêm một số công cụ và thư viện trợ giúp nhất định để mọi thứ dễ dàng hơn và chúng ta sẽ xem xét một số trong số chúng.

Thư viện thử nghiệm​

Thử nghiệm có thể đóng vai trò quan trọng khi xây dựng các ứng dụng quy mô lớn. Nó giúp chúng ta tránh các lỗi không cần thiết trong quá trình phát triển khi làm việc với một nhóm. Hãy cùng xem xét ba loại thử nghiệm mà chúng ta có thể thực hiện trong ứng dụng Vue và các khuôn khổ của chúng.

• Kiểm thử thành phần
  Thư viện kiểm thử Vue, Vue Test Utils.
• Kiểm thử đơn vị
  Jest, Mocha.
• Kiểm thử đầu cuối
  Nightwatch.js, Cypress.

Thành phần Thư viện​

Thư viện thành phần là một tập hợp các thành phần có thể tái sử dụng mà chúng ta có thể sử dụng trong ứng dụng của mình để phát triển UI nhanh hơn và nhất quán hơn nhiều trong ứng dụng của mình. Giống như React và Angular, Vue có bộ thư viện thành phần riêng. Một số trong số chúng bao gồm:

• Bộ công cụ Vue Material
  Bộ công cụ UI Vue.js "Badass" được xây dựng dựa trên thiết kế vật liệu. Nó chứa hơn 60 thành phần thủ công.
• Buefy
  Một thư viện thành phần nhẹ dựa trên khuôn khổ Bulma CSS. Nếu bạn cảm thấy thoải mái với SASS, bạn sẽ không gặp vấn đề gì khi sử dụng nó.
• Vuetify
  Đây cũng là một framework thành phần thiết kế vật liệu với khả năng cung cấp các khung mã có sẵn, với một cộng đồng lớn và các bản cập nhật thường xuyên
• Quasar
  Là framework thành phần mà tôi yêu thích nhất. Quasar với ngăn xếp front-end hiệu suất cao cho phép bạn xây dựng các ứng dụng đa nền tảng cho Web, Di động và Máy tính để bàn.

Các thư viện thú vị khác​

Các thư viện đáng chú ý khác là:

• FilePond
  Thư viện Vue.js này tải lên bất kỳ hình ảnh nào bạn cung cấp và tối ưu hóa các hình ảnh đó với trải nghiệm mượt mà.
• Vuelidate
  Thư viện này rất quan trọng khi làm việc với các biểu mẫu và bạn cần một cách để xác thực thông tin đầu vào của người dùng trên front-end. Đây là một xác thực dựa trên Mô hình đơn giản và nhẹ.
• vue-Clickaway
  Vue không có trình lắng nghe sự kiện gốc để biết khi nào người dùng nhấp bên ngoài một phần tử, ví dụ như danh sách thả xuống, đó là lý do tại sao vue-clickaway tồn tại để phát hiện các sự kiện nhấp.

Còn nhiều thư viện khác nữa. Bạn có thể xem qua rất nhiều thư viện trên madewithvuejs.com và vuejsexamples.com.

Các tiện ích mở rộng hữu ích giúp bạn viết Vue​

Các tiện ích mở rộng thực sự là những công cụ hữu ích, có thể tạo ra sự khác biệt lớn trong năng suất hàng ngày của bạn khi viết vuejs. Trong thời gian tôi dành để viết mã Vuejs, tôi thấy các tiện ích mở rộng sau đây rất hữu ích:

• Vetur
  Đây là tiện ích mở rộng số một trong danh sách của tôi. Tiết kiệm cho tôi nhiều giờ khi viết Vuejs. Tiện ích này cung cấp tính năng tô sáng cụ thể, đoạn mã, Intellisense, gỡ lỗi và nhiều tính năng khác cho Vue.js.
• Dấu trang
  Tiện ích mở rộng này rất hữu ích khi làm việc trên một dự án lớn vì bạn có thể đánh dấu và đặt dấu trang ở những vị trí trong mã của mình và nhảy đến vị trí cụ thể đó khi bạn muốn.
• Eslint
  Eslint giúp chúng ta dễ dàng tìm thấy lỗi mã hóa bằng cách đưa ra cảnh báo nếu chúng ta làm sai điều gì đó trong mã. Nên sử dụng ở định dạng đẹp hơn.
• Gói mở rộng Vue.js
  Gói mở rộng này chứa một bộ sưu tập các tiện ích mở rộng khác sẽ giúp ích cho quá trình phát triển Vue.js của bạn như Prettier, Vetur, Night Owl, v.v.

Kết luận​

Trong hướng dẫn này, chúng tôi đã xem xét một số mẹo và công cụ giúp bạn trở thành nhà phát triển Vue giỏi hơn. Chúng tôi bắt đầu với một số hiểu biết hữu ích về việc tổ chức các dự án của mình theo quy mô và các điểm tuyệt vời khác cần lưu ý và chúng tôi đã tổng hợp lại bằng các Công cụ và tiện ích mở rộng giúp việc viết Vuejs dễ dàng hơn rất nhiều.

Hãy nhớ rằng hầu hết những gì được học trong bài viết này đều tập trung vào Vue.js 2, để tránh hiểu lầm.

Các tài nguyên khác​

Sau đây là một số liên kết hữu ích mà bạn có thể xem nếu muốn tìm hiểu sâu hơn về một số điều chúng tôi đã thảo luận ở trên.

• “Chỉ thị tùy chỉnh,” Tài liệu chính thức
• “Khả năng phản ứng của Vue,” Tài liệu chính thức
• “Vue Devtools,” trang web
• Bài nói về Composition API so với Vuex
• Các công cụ hữu ích để phát triển javascript vue của Timi Omoyeni

Đọc thêm​

• 35 hướng dẫn Photoshop cổ điển và hoài cổ tuyệt đẹp
• 60 biển báo cổ điển hiếm và lạ
• Triển lãm kiểu chữ cổ điển và hoài cổ
• Khám phá lại niềm vui thiết kế