add blog to project

content/fa/blog/vue-composition-api.md

@@ -0,0 +1,179 @@
+---
+title: "راهنمای Composition API در Vue 3"
+description: "آموزش کامل Composition API در Vue 3 با مثال‌های کاربردی و بهترین روش‌های پیاده‌سازی."
+date: "2024-11-07"
+tags: ["vue", "composition-api", "آموزش", "فارسی"]
+image: "/img/blog/vue-composition.jpg"
+author: "علی ارغیانی"
+draft: false
+---
+
+# راهنمای Composition API در Vue 3
+
+Composition API یکی از مهم‌ترین ویژگی‌های Vue 3 است که روش جدیدی برای سازماندهی و استفاده مجدد از منطق کامپوننت‌ها ارائه می‌دهد.
+
+## چرا Composition API؟
+
+Composition API مشکلات Options API را حل می‌کند:
+
+- **سازماندهی بهتر**: منطق مرتبط را در کنار هم نگه دارید
+- **استفاده مجدد**: composable ها را به راحتی به اشتراک بگذارید
+- **Type Safety**: پشتیبانی بهتر از TypeScript
+- **خوانایی**: کد تمیزتر و قابل فهم‌تر
+
+## مفاهیم پایه
+
+### Reactive State
+
+برای ایجاد state واکنش‌پذیر از `ref` یا `reactive` استفاده کنید:
+
+```vue
+<script setup>
+import { ref, reactive } from 'vue'
+
+// با ref
+const count = ref(0)
+
+// با reactive
+const state = reactive({
+  name: 'علی',
+  age: 25
+})
+</script>
+```
+
+### Computed Properties
+
+برای مقادیر محاسبه‌شده از `computed` استفاده کنید:
+
+```vue
+<script setup>
+import { ref, computed } from 'vue'
+
+const firstName = ref('علی')
+const lastName = ref('ارغیانی')
+
+const fullName = computed(() => {
+  return `${firstName.value} ${lastName.value}`
+})
+</script>
+```
+
+### Watchers
+
+برای نظارت بر تغییرات از `watch` یا `watchEffect` استفاده کنید:
+
+```vue
+<script setup>
+import { ref, watch } from 'vue'
+
+const count = ref(0)
+
+watch(count, (newValue, oldValue) => {
+  console.log(`تغییر از ${oldValue} به ${newValue}`)
+})
+</script>
+```
+
+## Composables
+
+composable ها توابع قابل استفاده مجددی هستند که منطق stateful را کپسوله می‌کنند:
+
+```typescript
+// 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
+  }
+}
+```
+
+استفاده از composable:
+
+```vue
+<script setup>
+const { count, increment, decrement } = useCounter(10)
+</script>
+
+<template>
+  <div>
+    <p>شمارنده: {{ count }}</p>
+    <button @click="increment">افزایش</button>
+    <button @click="decrement">کاهش</button>
+  </div>
+</template>
+```
+
+## Lifecycle Hooks
+
+از lifecycle hooks در `<script setup>` استفاده کنید:
+
+```vue
+<script setup>
+import { onMounted, onUnmounted } from 'vue'
+
+onMounted(() => {
+  console.log('کامپوننت mount شد')
+})
+
+onUnmounted(() => {
+  console.log('کامپوننت unmount شد')
+})
+</script>
+```
+
+## بهترین روش‌ها
+
+### 1. استفاده از `<script setup>`
+
+این سینتکس مختصرتر و بهینه‌تر است:
+
+```vue
+<script setup>
+// کد شما اینجا
+</script>
+```
+
+### 2. سازماندهی Composables
+
+composable ها را در دایرکتوری `composables/` قرار دهید:
+
+```
+composables/
+  ├── useAuth.ts
+  ├── useCounter.ts
+  └── useFetch.ts
+```
+
+### 3. نام‌گذاری
+
+composable ها را با `use` شروع کنید:
+
+```typescript
+export function useMyFeature() {
+  // ...
+}
+```
+
+## نتیجه‌گیری
+
+Composition API روش قدرتمندی برای نوشتن کامپوننت‌های Vue است که کد را قابل نگهداری‌تر، قابل استفاده مجددتر و type-safe تر می‌کند.
+
+با تمرین و استفاده مداوم، Composition API به بخش طبیعی از توسعه Vue شما تبدیل خواهد شد.