Composition API trong Vue 3

Giới thiệu Composition API

Composition API là cách mới để tổ chức logic trong Vue components.

Setup Function

<template>
  <div>
    <h1>{{ title }}</h1>
    <p>Count: {{ count }}</p>
    <button @click="increment">Tăng</button>
  </div>
</template>

<script>
import { ref, computed } from 'vue'

export default {
  setup() {
    const title = ref('Vue 3 Composition API')
    const count = ref(0)
    
    const increment = () => {
      count.value++
    }
    
    const doubleCount = computed(() => count.value * 2)
    
    return {
      title,
      count,
      increment,
      doubleCount
    }
  }
}
</script>

Script Setup (Syntactic Sugar)

<template>
  <div>
    <h1>{{ title }}</h1>
    <p>Count: {{ count }}</p>
    <p>Double: {{ doubleCount }}</p>
    <button @click="increment">Tăng</button>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'

const title = ref('Vue 3 Script Setup')
const count = ref(0)

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

const doubleCount = computed(() => count.value * 2)
</script>

Reactivity Fundamentals

ref()

import { ref } from 'vue'

const count = ref(0)
console.log(count.value) // 0

count.value++
console.log(count.value) // 1

reactive()

import { reactive } from 'vue'

const state = reactive({
  count: 0,
  name: 'Vue'
})

console.log(state.count) // 0
state.count++

Lifecycle Hooks

<script setup>
import { onMounted, onUpdated, onUnmounted } from 'vue'

onMounted(() => {
  console.log('Component mounted')
})

onUpdated(() => {
  console.log('Component updated')
})

onUnmounted(() => {
  console.log('Component unmounted')
})
</script>

Composables - Custom Hooks

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

export function useCounter(initialValue = 0) {
  const count = ref(initialValue)
  
  const increment = () => count.value++
  const decrement = () => count.value--
  const reset = () => count.value = initialValue
  
  return {
    count,
    increment,
    decrement,
    reset
  }
}

<script setup>
import { useCounter } from '@/composables/useCounter'

const { count, increment, decrement } = useCounter(10)
</script>

Bài tập thực hành

Hãy tạo custom composable cho việc quản lý state!