راهنمای Composition API در Vue 3

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

// با ref
const count = ref(0)

// با reactive
const state = reactive({
  name: 'علی',
  age: 25
})
</script>

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

const firstName = ref('علی')
const lastName = ref('ارغیانی')

const fullName = computed(() => {
  return `${firstName.value} ${lastName.value}`
})
</script>

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

const count = ref(0)

watch(count, (newValue, oldValue) => {
  console.log(`تغییر از ${oldValue} به ${newValue}`)
})
</script>

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

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

<template>
  <div>
    <p>شمارنده: {{ count }}</p>
    <button @click="increment">افزایش</button>
    <button @click="decrement">کاهش</button>
  </div>
</template>

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

onMounted(() => {
  console.log('کامپوننت mount شد')
})

onUnmounted(() => {
  console.log('کامپوننت unmount شد')
})
</script>

<script setup>
// کد شما اینجا
</script>

composables/
  ├── useAuth.ts
  ├── useCounter.ts
  └── useFetch.ts

export function useMyFeature() {
  // ...
}