Di chuyển sang Composition API Vue 3 để phát triển thành phần tốt hơn
Vì những người tạo ra Vue đã thông báo rằng Vue 2 sẽ ngừng hoạt động trước ngày 31 tháng 12 năm 2023, nên các nhà phát triển được khuyến khích chuyển sang Vue 3.
Sự ra đời của quá trình phát triển này mang đến Giao diện nền tảng ứng dụng tổng hợp, trình bày một phương pháp hợp lý hơn, rõ ràng và an toàn hơn để xây dựng các dự án Vue thông qua các nguyên tắc thiết kế mô-đun và khai báo của nó.
API Thành phần là gì?
Sự xuất hiện của Composition API biểu thị một sự thay đổi đáng kể so với phương pháp thông thường được sử dụng trong việc tạo các thành phần Vue bằng cách sử dụng đối tượng Tùy chọn. Việc áp dụng kỹ thuật tiến bộ này phù hợp với tư duy ngày càng quyết đoán và khai báo, nhấn mạnh vào việc tập trung vào việc xây dựng một ứng dụng Vue mà không bị cản trở bởi các đặc điểm triển khai phức tạp.
Động lực cho Composition API
Các nhà phát triển Vue đã xác định những khó khăn liên quan đến việc sử dụng đối tượng Tùy chọn trong việc xây dựng các ứng dụng web phức tạp khi quy mô dự án tăng lên. Cụ thể, việc quản lý logic của một thành phần trở nên kém khả thi hơn trên quy mô lớn và khó duy trì hơn trong cài đặt cộng tác.
Việc triển khai thông thường đối tượng Tùy chọn thường dẫn đến sự phong phú của các thuộc tính thành phần, khiến mã khó hiểu và quản lý do tính phức tạp của nó.
Ngoài ra, việc sử dụng logic chia sẻ giữa các thành phần khác nhau tỏ ra khó sử dụng. Hơn nữa, logic phổ biến được phân tán trong nhiều phương pháp và móc nối vòng đời làm phức tạp thêm sự hiểu biết về hành vi bao quát của một thành phần riêng lẻ.
Lợi ích của Composition API
Việc sử dụng Composition API mang lại vô số lợi ích so với API tùy chọn, nâng cao chức năng tổng thể và trải nghiệm người dùng.
Hiệu suất được cải thiện
Vue 3 đã giới thiệu một phương pháp kết xuất sáng tạo được gọi là Hệ thống phản ứng dựa trên Proxy, được thiết kế để nâng cao cả hiệu suất và khả năng phản hồi. Bằng cách giảm thiểu mức sử dụng bộ nhớ và tối ưu hóa khả năng phản hồi, hệ thống mới này cho phép xử lý cải tiến các hệ thống phân cấp thành phần mở rộng với hiệu quả cao hơn.
Kích thước gói nhỏ hơn
Do kiến trúc hợp lý và phân bổ tài nguyên hiệu quả được cung cấp bởi cơ sở mã được tối ưu hóa và khả năng rung cây của Vue 3, nó tự hào có một gói nhỏ gọn hơn so với phiên bản tiền nhiệm, dẫn đến thời gian tải nhanh hơn và nâng cao hiệu suất tổng thể.
Tổ chức mã được cải tiến
Bằng cách sử dụng các khả năng của Composition API, có thể chia mã nguồn của thành phần thành các đơn vị mô-đun, dễ quản lý hơn thông qua việc triển khai các hàm nhỏ hơn, có thể tái sử dụng. Cách tiếp cận như vậy không chỉ nâng cao sự hiểu biết và tạo điều kiện thuận lợi cho việc bảo trì liên tục mà còn đóng vai trò là một chiến lược có giá trị trong việc giải quyết các thách thức do các thành phần phức tạp và mở rộng đặt ra.
Khả năng tái sử dụng của các thành phần và chức năng
Việc sử dụng các hàm tổng hợp cho phép tích hợp liền mạch và tái sử dụng mã trong các thành phần khác nhau, tạo ra một thư viện hiệu quả gồm các chức năng được chia sẻ.
Hỗ trợ TypeScript tốt hơn
Sự ra đời của Composition API đã cải thiện đáng kể mức độ hỗ trợ TypeScript trong Visual Studio Code, dẫn đến mức độ chính xác cao hơn liên quan đến suy luận kiểu, cũng như tăng khả năng phát hiện và giải quyết những khác biệt về mặt chữ trong quá trình phát triển.
So sánh giữa đối tượng tùy chọn và API thành phần
Với sự quen thuộc của bạn với nền tảng lý thuyết của Composition API của React, giờ đây bạn đã sẵn sàng áp dụng kiến thức này vào bối cảnh thực tế. Việc so sánh giữa lợi ích do Composition API mang lại và lợi ích do các thành phần lớp cung cấp sẽ giúp làm sáng tỏ tuyên bố giá trị của nó.
Dữ liệu phản ứng trong Vue 3
Dữ liệu phản ứng đề cập đến một nguyên tắc chính của Vue, cho phép tương tác liền mạch giữa sửa đổi dữ liệu và cập nhật tương ứng trên giao diện người dùng mà không yêu cầu hành động rõ ràng hoặc tải lại trang. Đồng bộ hóa tự động này đảm bảo trải nghiệm hiệu quả và đáp ứng cho người dùng.
Vue 2 đã sử dụng phương thức Object.defineProperty làm nền tảng cho hệ thống phản ứng của nó, với hệ thống nói trên được xây dựng dựa trên một đối tượng dữ liệu bao gồm tất cả các thuộc tính phản ứng trong một ứng dụng.
Việc sử dụng tùy chọn data trong thành phần Vue cho phép triển khai tự động các phương thức getter và setter tuân thủ ES6 xung quanh mỗi thuộc tính có trong đối tượng data .
Các getters và setters nói trên đã giám sát sự phụ thuộc lẫn nhau giữa các thuộc tính và tự động điều chỉnh giao diện người dùng để đáp ứng với các sửa đổi được thực hiện đối với bất kỳ thuộc tính nào trong số này.
Theo cách tinh tế hơn, đây là minh họa thể hiện việc tạo dữ liệu phản hồi trong Vue 2 bằng cách sử dụng đối tượng Tùy chọn:
<template>
<div>
<p>Count: {{ count }}</p>
<button @click="increment">Increment</button>
</div>
</template>
<script>
export default {
data() {
return {
count: 0,
};
},
methods: {
increment() {
this.count\+\+;
},
},
};
</script>
Trong ví dụ này, chúng tôi minh họa quá trình thiết lập các biến có thể thay đổi trong ngữ cảnh của Vue.js. Ngay khi một biến được xác định bên trong đối tượng data , nó trở nên dễ tiếp thu các thay đổi và cập nhật, do đó dẫn đến sửa đổi giao diện người dùng của ứng dụng được liên kết.
Ngoài ra, bạn đã sử dụng đối tượng method để triển khai các hàm JavaScript được sử dụng trong thành phần. Trong trường hợp này, khối mã mô tả hàm increment() , làm tăng giá trị của biến count lên một.
Để sử dụng các hàm làm phương thức trong ứng dụng Vue 2, điều cần thiết là phải sử dụng từ khóa “this” cùng với lệnh gọi hàm và (các) biến liên quan của nó. Điều này là do từ khóa “this” dùng để tham chiếu các biến của đối tượng dữ liệu thích hợp. Việc không bao gồm từ khóa “this” tại thời điểm hiển thị thành phần sẽ dẫn đến lỗi do Vue tạo ra trong quá trình gắn kết.
Vue 3 đã triển khai hệ thống phản hồi dựa trên proxy nhằm tận dụng sức mạnh của proxy JavaScript để nâng cao chức năng của nó. Cách tiếp cận mới này mang lại những lợi ích hiệu suất đáng chú ý cũng như cải thiện việc quản lý các phần phụ thuộc phản ứng, mang lại trải nghiệm phát triển tổng thể hiệu quả hơn.
Vue cung cấp hai loại hàm để xác định dữ liệu phản ứng-hàm ref và hàm reactive. Cái trước thiết lập một tham chiếu phản ứng đơn độc cho một giá trị cụ thể, trong khi cái sau xây dựng toàn bộ cấu trúc phản ứng bao gồm nhiều thuộc tính.
Trong trường hợp này, chúng tôi sẽ minh họa quá trình tạo dữ liệu phản hồi bằng cách sử dụng hàm ref trong ngữ cảnh của Vue 3:
<script setup>
import { ref } from 'vue';
const count = ref(0);
function increment() {
count.value\+\+;
}
</script>
<template>
<div>
<p>Count: {{ count }}</p>
<button @click="increment">Increment</button>
</div>
</template>
Để sử dụng hàm ref() trong ngữ cảnh của Vue 3, trước tiên người ta phải nhập nó từ gói Vue. Hàm này phục vụ như một phương tiện để tạo các tham chiếu phản ứng cho các biến khác nhau.
Mã JavaScript được cung cấp sử dụng hàm ref() để tạo tham chiếu đến biến count, đặt giá trị ban đầu của nó là “0”. Sau đó, nó gán đối tượng được trả về từ hàm ref() cho biến count . Đối tượng đã nói chứa một thuộc tính duy nhất có tên value , đóng vai trò là bộ lưu trữ có thể thay đổi cho trạng thái hiện tại của biến count.
Lệnh @click được sử dụng trong khung Vue để quản lý và phản hồi các sự kiện nhấp chuột xảy ra trong giao diện được hiển thị của một thành phần. Cơ chế liên kết sự kiện này cho phép xử lý tùy chỉnh các tương tác của người dùng, cho phép nhà phát triển kết hợp chức năng động hoặc kích hoạt các hành động cụ thể khi phát hiện sự kiện nhấp chuột.
Trong Vue 3, cú pháp phương thức xác định hàm trong các thành phần đã được thay thế bằng cách sử dụng các hàm JavaScript tiêu chuẩn. Các hàm này được xác định trong khối setup của tập lệnh của thành phần.
Bây giờ người ta có thể sử dụng các thuộc tính phản ứng được thiết lập thông qua ứng dụng hàm ref() bằng cách liên kết phương thức trả về giá trị với mã định danh được chỉ định. Để minh họa, ví dụ mã được cung cấp sử dụng cú pháp “count.value” để ám chỉ trạng thái hiện tại của thuộc tính phản ứng “count”.
Hàm tính toán trong Vue 3
Hàm được tính toán đóng vai trò là một công cụ có giá trị trong kho vũ khí của Vue, cho phép tạo ra các giá trị được tính toán lấy từ dữ liệu phản ứng. Quá trình cập nhật tự động này diễn ra mỗi khi có bất kỳ thay đổi phụ thuộc nào, do đó đảm bảo rằng kết quả tính toán luôn cập nhật và chính xác.
Trong Vue 2, người ta xác định hành vi được tính toán của một thành phần bằng cách sử dụng tùy chọn “được tính toán” nằm trong thành phần đã nói. Một ví dụ minh họa được cung cấp dưới đây:
<template>
<div>
<p>Count: {{ count }}</p>
<p>Double Count: {{ doubleCount }}</p>
<button @click="incrementCount">Increment Count</button>
</div>
</template>
<script>
export default {
data() {
return {
count: 0
};
},
computed: {
doubleCount() {
return this.count * 2;
}
},
methods: {
incrementCount() {
this.count\+\+;
}
}
};
</script>
Trong hình minh họa nói trên, thuộc tính được tính toán doubleCount phụ thuộc vào thuộc tính dữ liệu count. Nếu thuộc tính count trải qua bất kỳ thay đổi nào, Vue sẽ đánh giá lại thuộc tính doubleCount cho phù hợp.
Trong Vue 3, việc giới thiệu Composition API trình bày một cách tiếp cận mới để xác định các thuộc tính được tính toán thông qua việc sử dụng hàm được tính toán. Cú pháp thực hiện này như sau:
<script setup>
import { ref, computed } from 'vue';
const count = ref(0);
const doubleCount = computed(() => count.value * 2);
const incrementCount = () => {
count.value\+\+;
};
</script>
<template>
<div>
<p>Count: {{ count }}</p>
<p>Double Count: {{ doubleCount }}</p>
<button @click="incrementCount">Increment Count</button>
</div>
</template>
Để sử dụng hàm được tính toán có nguồn gốc từ gói Vue, trước tiên người ta phải nhập hàm đã nói vào cơ sở mã của chúng.
Trong đoạn mã được cung cấp, chúng tôi đã thiết lập một thuộc tính được tính toán có tên là “doubleCount” bằng cách sử dụng hàm tính toán. Danh pháp này nhấn mạnh sự phụ thuộc của các thuộc tính được tính toán vào các nguồn dữ liệu phản ứng, đây là một đặc điểm nổi bật của khung Vue 3.
Việc triển khai được cung cấp xác định hàm tính toán chấp nhận hàm getter làm đầu vào, trong đó hàm getter chịu trách nhiệm lấy giá trị từ dữ liệu phản ứng. Cụ thể, trong trường hợp này, phản xạ được tính toán doubleCount trả về tích của biến phản ứng count nhân với hai.
Điều đáng lưu ý là các khối mã được tạo bằng Composition API có xu hướng dễ đọc và ngắn gọn hơn so với các khối mã được tạo bằng cách sử dụng đối tượng Tùy chọn.
Tìm hiểu cách tạo chỉ thị tùy chỉnh trong Vue
Composition API của Vue 3 cung cấp một phương pháp mạnh mẽ và linh hoạt để cấu trúc và tái sử dụng mã trong các mẫu thành phần, cho phép các nhà phát triển tạo ra các ứng dụng Vue hợp lý và dễ quản lý hơn thông qua tính mô đun hóa và khả năng bảo trì tăng lên.
Vue cung cấp chức năng bổ sung giúp nâng cao hiệu quả trong việc tạo ứng dụng web. Người ta có thể thu thập kiến thức về cách phát triển các chỉ thị phù hợp, cho phép sử dụng các chức năng cụ thể trong các phần khác nhau của dự án Vue.