Trong Vue 3, Composition API là một tính năng mới giúp tổ chức logic của component một cách rõ ràng và linh hoạt hơn so với Options API trong Vue 2. Với Composition API, bạn có thể tách rời và tái sử dụng logic dễ dàng hơn, đặc biệt khi component trở nên phức tạp.

Dưới đây là các khái niệm chính của Composition API:

1. Setup Function

• setup() là trái tim của Composition API, được gọi khi component được khởi tạo.
• Tất cả logic bên trong component (data, computed, methods, lifecycle hooks) có thể được định nghĩa trong setup().
• Dữ liệu return từ setup() sẽ có sẵn để sử dụng trong template.

import { ref } from 'vue';

export default {
  setup() {
    const count = ref(0);
    const increment = () => count.value++;
    
    return { count, increment };
  }
};

2. Reactive State

• ref() và reactive() là hai cách để tạo reactive state trong Composition API.
• ref(): Dùng để bọc các giá trị nguyên thủy (primitive values) như number, string, boolean.

const count = ref(0); // count.value để truy cập giá trị

• reactive(): Dùng để tạo reactive state cho các object hoặc array.

const state = reactive({
  count: 0,
  user: {
    name: 'Alice',
    age: 25
  }
});

3. Computed Properties

• Tương tự Options API, bạn có thể sử dụng computed() để tạo các thuộc tính tính toán (computed properties) trong Composition API.

import { ref, computed } from 'vue';

export default {
  setup() {
    const count = ref(0);
    const doubleCount = computed(() => count.value * 2);
    
    return { count, doubleCount };
  }
};

4. Lifecycle Hooks

• Composition API cung cấp các lifecycle hooks dưới dạng hàm thay vì các property như trong Options API.
• Một số hook phổ biến:
  • onMounted(): Thay thế cho mounted
  • onUpdated(): Thay cho updated
  • onUnmounted(): Thay cho beforeDestroy và destroyed

import { onMounted } from 'vue';

export default {
  setup() {
    onMounted(() => {
      console.log('Component mounted!');
    });
  }
};

5. Reusable Logic (Composables)

• Một trong những điểm mạnh của Composition API là khả năng chia sẻ và tái sử dụng logic thông qua các hàm có thể gọi là composables.
• Bạn có thể tạo một hàm composable và tái sử dụng nó ở nhiều component khác nhau.

// useCounter.js
import { ref } from 'vue';

export function useCounter() {
  const count = ref(0);
  const increment = () => count.value++;
  return { count, increment };
}

// MyComponent.vue
import { useCounter } from './useCounter';

export default {
  setup() {
    const { count, increment } = useCounter();
    return { count, increment };
  }
};

6. Provide và Inject

• provide/inject trong Composition API được dùng để chia sẻ dữ liệu giữa các component ancestor và descendant mà không cần phải truyền qua props.

import { provide, inject } from 'vue';

// Parent Component
export default {
  setup() {
    provide('message', 'Hello from parent');
  }
};

// Child Component
export default {
  setup() {
    const message = inject('message');
    return { message };
  }
};

Ưu điểm của Composition API:

• Tái sử dụng logic tốt hơn: Thay vì phải chia logic thành các option như data, methods, computed trong Options API, bạn có thể tổ chức logic theo tính năng (feature) trong Composition API.
• Dễ dàng mở rộng: Component phức tạp với nhiều tính năng có thể dễ dàng mở rộng và bảo trì hơn.
• Tách biệt logic rõ ràng: Mỗi phần logic có thể được tách riêng và đóng gói thành các composables độc lập, tái sử dụng ở nhiều nơi.

Khi nào nên dùng Composition API?

• Khi component trở nên quá phức tạp, khó quản lý với Options API.
• Khi cần chia sẻ logic giữa nhiều component khác nhau.
• Khi bạn muốn viết code theo phong cách linh hoạt và module hóa hơn.

Hy vọng giải thích này giúp bạn hiểu rõ về Composition API trong Vue 3!