API thành phần Vue
Composition API là một cách khác để viết ứng dụng Vue vào API tùy chọn được sử dụng ở nơi khác trong hướng dẫn này.
Trong Composition API, chúng ta có thể viết mã thoải mái hơn nhưng nó đòi hỏi sự hiểu biết sâu sắc hơn và được coi là ít thân thiện với người mới bắt đầu hơn.
API thành phần
Với Composition API, logic được viết bằng cách sử dụng các hàm Vue đã nhập thay vì sử dụng cấu trúc phiên bản Vue mà chúng ta đã quen sử dụng từ API Tùy chọn.
Đây là cách Composition API có thể được sử dụng để viết ứng dụng Vue giúp giảm số lượng máy đánh chữ trong bộ lưu trữ bằng một nút:
Ví dụ
App.vue :
<template>
<h1>Example</h1>
<img src="/img_typewriter.jpeg" alt="Typewriter">
<p>Typewriters left in storage: {{ typeWriters }}</p>
<button @click="remove">Remove one</button>
<p style="font-style: italic;">"{{ storageComment }}"</p>
</template>
<script setup>
import { ref, computed } from 'vue'
const typeWriters = ref(10);
function remove(){
if(typeWriters.value>0){
typeWriters.value--;
}
}
const storageComment = computed(
function(){
if(typeWriters.value > 5) {
return "Many left"
}
else if(typeWriters.value > 0){
return "Very few left"
}
else {
return "No typewriters left"
}
}
)
</script>
Chạy ví dụ » Trên dòng 9 trong ví dụ trên, thuộc tính setup giúp sử dụng Composition API dễ dàng hơn. Ví dụ: bằng cách sử dụng thuộc tính setup , các biến và hàm có thể được sử dụng trực tiếp bên trong <template> .
Trên dòng 10 , ref và computed phải được nhập trước khi có thể sử dụng. Trong API tùy chọn, chúng tôi không cần nhập bất cứ thứ gì để khai báo các biến phản ứng hoặc sử dụng các thuộc tính được tính toán.
Trên dòng 12 , ref được sử dụng để khai báo thuộc tính 'máy đánh chữ' là phản ứng với '10' là giá trị ban đầu.
Để khai báo thuộc tính 'typewriters' là phản ứng có nghĩa là dòng {{ typewriters }} trong <template> sẽ được hiển thị lại tự động để hiển thị giá trị cập nhật khi giá trị thuộc tính 'typewriters' thay đổi. Với API tùy chọn, các thuộc tính dữ liệu sẽ trở nên phản ứng nếu cần khi ứng dụng được xây dựng, chúng không cần phải được khai báo rõ ràng là phản ứng.
Hàm 'remove()' được khai báo ở dòng 14 sẽ được khai báo theo 'phương thức' thuộc tính Vue nếu ví dụ được viết trong API tùy chọn.
Thuộc tính được tính toán 'storageComment' trên dòng 20 sẽ được khai báo trong thuộc tính Vue 'được tính toán' nếu ví dụ được viết trong API tùy chọn.
API tùy chọn
API tùy chọn là thứ được sử dụng ở nơi khác trong hướng dẫn này.
API Tùy chọn được chọn cho hướng dẫn này vì nó có cấu trúc dễ nhận biết và được coi là dễ bắt đầu hơn đối với người mới bắt đầu.
Ví dụ: cấu trúc trong API tùy chọn có các thuộc tính dữ liệu, phương thức và thuộc tính được tính toán, tất cả đều được đặt trong các phần khác nhau của phiên bản Vue, được phân tách rõ ràng.
Đây là ví dụ ở trên được viết bằng API tùy chọn:
Ví dụ
App.vue :
<template>
<h1>Example</h1>
<img src="/img_typewriter.jpeg" alt="Typewriter">
<p>Typewriters left in storage: {{ typeWriters }}</p>
<button @click="remove">Remove one</button>
<p style="font-style: italic;">"{{ storageComment }}"</p>
</template>
<script>
export default {
data() {
return {
typeWriters: 10
};
},
methods: {
remove(){
if(this.typeWriters>0){
this.typeWriters--;
}
}
},
computed: {
storageComment(){
if(this.typeWriters > 5) {
return "Many left"
}
else if(this.typeWriters > 0){
return "Very few left"
}
else {
return "No typewriters left"
}
}
}
}
</script>
Chạy ví dụ »