Lợi ích và ví dụ về Composition API trong Vue.js 3

Composition API trong Vue.js 3 là một bộ tính năng mới được thiết kế để cải thiện khả năng tổ chức và tái sử dụng logic trong các ứng dụng Vue lớn hơn. Trong khi Options API—phương pháp truyền thống để xây dựng các component Vue—tổ chức code dựa trên các tùy chọn (data, methods, computed properties, v.v.), Composition API cho phép bạn sử dụng các function để trực tiếp tạo ra và quản lý các tính năng reactive, từ đó giúp bạn có thể dễ dàng trích xuất và tái sử dụng các phần của component.

Lợi ích của Composition API:

1. Tái sử dụng Logic: Dễ dàng trích xuất và tái sử dụng logic giữa các components.
2. Tổ chức Code: Giúp tổ chức code tốt hơn, nhất là đối với các components lớn và phức tạp.
3. TypeScript Support: Cung cấp sự tương thích tốt hơn với TypeScript.
4. Dễ kiểm soát Dependency: Bạn kiểm soát rõ ràng các dependencies của mỗi phần logic.

Ví dụ về Composition API:

Giả sử bạn muốn xây dựng một component đơn giản để đếm số. Component này sử dụng Composition API để quản lý state và các function.

<template>
  <div>
    <button @click="decrement">-</button>
    <span>{{ count }}</span>
    <button @click="increment">+</button>
  </div>
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {
    // Tạo một state reactive
    const count = ref(0);

    // Định nghĩa function để tăng giá trị
    const increment = () => {
      count.value++;
    };

    // Định nghĩa function để giảm giá trị
    const decrement = () => {
      count.value--;
    };

    // Phơi bày các biến và function ra ngoài template
    return { count, increment, decrement };
  }
}
</script>

Trong ví dụ này, chúng ta sử dụng ref từ Vue để tạo ra một đối tượng count có khả năng phản ứng (reactive). Các function increment và decrement được định nghĩa để tăng và giảm giá trị của count. Tất cả các biến và function này được trả về trong hàm setup, cho phép chúng được sử dụng trong template của component.

Điểm khác biệt giữa việc sử dụng module thông thường js và Composition API trong Vue.js

Điểm khác biệt chính giữa việc sử dụng một module thông thường với JavaScript để quản lý trạng thái và việc sử dụng Composition API trong Vue.js nằm ở tính "reactivity" của dữ liệu.

Reactivity trong Vue.js

Trong Vue.js, để dữ liệu có khả năng phản hồi (reactivity), nó phải được bao bọc bởi các APIs đặc biệt như ref hoặc reactive. Điều này cho phép Vue theo dõi các thay đổi đối với dữ liệu đó và tự động cập nhật DOM khi dữ liệu thay đổi. Nếu chỉ sử dụng JavaScript thông thường:

export function useCounter(initialValue = 0) {
  let count = initialValue;

  const increment = () => {
    count++;
  };

  const decrement = () => {
    count--;
  };

  return { count, increment, decrement };
}

Trong đoạn code này, mặc dù bạn đã tạo một module có thể tái sử dụng với các hàm để thay đổi giá trị của count, nhưng count không phải là một biến phản hồi. Điều này có nghĩa là khi bạn sử dụng module này trong Vue, các thay đổi về giá trị count sẽ không tự động cập nhật trong DOM hoặc trong các components Vue khác mà phụ thuộc vào giá trị đó.

Sử dụng Composition API

Trở lại với ví dụ sử dụng ref trong Composition API:

import { ref } from 'vue';

export function useCounter(initialValue = 0) {
  const count = ref(initialValue);

  const increment = () => {
    count.value++;
  };

  const decrement = () => {
    count.value--;
  };

  return { count, increment, decrement };
}

Trong trường hợp này, count là một ref—một đối tượng đặc biệt trong Vue mà bao bọc giá trị và cho phép Vue theo dõi các thay đổi của nó. Khi giá trị của count.value thay đổi, Vue sẽ tự động cập nhật DOM tương ứng và đảm bảo rằng các component sử dụng giá trị này cũng sẽ được cập nhật.

Kết Luận

Việc sử dụng Composition API không chỉ giúp tái sử dụng logic giữa các components một cách hiệu quả mà còn đảm bảo rằng các phần của ứng dụng có thể tương tác và phản hồi với nhau một cách mượt mà. Trong khi đó, sử dụng một module JavaScript thông thường không cung cấp tính phản hồi này, trừ khi bạn tự tích hợp nó với Vue theo một cách nào đó, điều này thường khó thực hiện và có thể dẫn đến lỗi trong quản lý trạng thái.

Composition API mang lại sự linh hoạt và khả năng tái sử dụng cao cho các developer Vue, đặc biệt khi xử lý các ứng dụng lớn. Đây là một công cụ mạnh mẽ cho phép bạn cải thiện cấu trúc và bảo trì code của mình một cách hiệu quả hơn.