ویو 3.5.0 منتشر شد (ویدیو دوبله شده)

بهینه سازی‌های زیادی در واکنش‌گرایی انجام شده است،
پشتیبانی از وب کامپوننت‌ها بهبود یافته است،
امکان دیستراکچر کردن props‌ها اضافه شده است،
استفاده از Teleport به تعویق افتاده (defer) است، useTemplateRef()، app.onUnmount()، useId() و بسیاری از ویژگی‌ها و رفع باگ‌های کوچک دیگر اضافه شده‌اند.


🔗https://blog.vuejs.org/posts/vue-3-5
🔗 https://github.com/vuejs/core/blob/main/CHANGELOG.md
#️⃣#tip #dub #vue
👥@IR_javascript_group
🆔@IR_javascript

نمونه‌ای از "نشت" استایل‌ها در Vue 3 با استفاده از Scoped Styles

<!-- A.vue -->
<div class="a" />

<!-- B.vue -->
<div class="b">
  <div class="a">
    <A /> <!-- اوه، مشکل! -->
  </div>
</div>

در این مثال، دو کامپوننت A.vue و B.vue هر دو از کلاسی با نام مشابه a استفاده می‌کنند. این مسئله حتی با وجود استفاده از scoped styles می‌تواند منجر به نشت استایل‌ها شود.
برای مشاهده و تست این مسئله می‌توانید از لینک زیر استفاده کنید

راه‌حل: نام‌گذاری معنایی کلاس‌ها
برای جلوگیری از این نوع تداخلات، بهتر است نام کلاس‌ها به گونه‌ای انتخاب شوند که معنایی باشند و وابستگی آن‌ها به کامپوننت مربوطه مشخص باشد.

🔗https://play.vuejs.org/#eNqdUj1PwzAQ/SvWzSgZYCoFKaAOMAACRi/GuQYXx7Z8Timq+t85O7S0AlWIKfH7sN7d8xqaEKrlgDCBKeloQhKEaQiX0pk++JhEI+bR90JCVTdZKeFcOumm9ShnIR8S9sGqhHyatmYptFVEFxJeJDAkxAGovkCGG1GPfM2CbN59927kI6UPi4K0D9gyUimxzjbtrY8T0UVEx6k2JVaWsgZOILHBzU1XLcg7nrB4JGjfB2Mx3odkvCMJk/G2zClr/fttwVIc8GSL61fUb7/gC1plTMJDRMK45PXsuKRih2mkZ093uOL/Hdn7drCsPkI+Ink75Iyj7GpwLcfe05W0N6Un47pnmq0SOtoOlYNm5aboJXB510dG/457Wp0VH2+Ut1ha//E+/tZ/rtoI1YuI7f+6ZeNhs7D5BMkN50M=
#️⃣#tip #vue
👥@IR_javascript_group
🆔@IR_javascript

// useUserService.ts

function isAuthenticated() {
  return !!user.value;
}

// کامپوننت A

<script>
const { isAuthenticated } = useUserService();
</script>

<template>
  <p v-if="isAuthenticated()">سلام</p>
</template>

توابع در Vue رفتار متفاوتی از توابع معمولی دارند.

در این مثال، تابع isAuthenticated() مانند یک computed عمل می‌کند و هر بار که مقدار user تغییر کند یا کامپوننت A دوباره رندر شود، فراخوانی خواهد شد.

این اتفاق به این دلیل می‌افتد که Vue تمام وابستگی‌های واکنش‌پذیر را درون بدنه‌ی تابع شناسایی کرده و هر زمان که یکی از آن‌ها تغییر کند، کامپوننت را دوباره رندر می‌کند.

بنابراین، تفاوت زیادی در استفاده از یک تابع به جای computed وجود ندارد. اما اگر داخل تابع منطق پیچیده‌تری وجود داشته باشد، بهتر است از computed استفاده کنید، زیرا فقط زمانی که وابستگی‌های آن تغییر کنند، محاسبه مجدد می‌شود، در حالی که تابع در هر رندر اجرا می‌شود.


#️⃣#tip #vue
👥@IR_javascript_group
🆔@IR_javascript

اگر صفحه‌ای را از طریق <router-view> نمایش می‌دهید که شامل پارامترهای مسیری (مانند محصولات، کاتالوگ‌ها یا کاربران از طریق شناسه) است و باید در صورت تغییر پارامتر، اطلاعات جدیدی بارگذاری کنید، یعنی باید تغییرات پارامتر را پیگیری کنید، این کار را می‌توان به دو روش انجام داد.

از طریق watch:

watch(
  () => route.params.id,
  async () => {
    userData.value = await fetchUser(to.params.id);
  },
  { immediate: true }
);

از طریق هوک روتر onBeforeRouteUpdate:

import { onBeforeRouteUpdate } from 'vue-router'

onBeforeRouteUpdate(async (to, from) => {
  if (to.params.id !== from.params.id) {
    userData.value = await fetchUser(to.params.id);
  }
})

روش دوم این امکان را فراهم می‌آورد که از onBeforeRouteLeave نیز استفاده کنید، اگر به هر دلیلی نیاز باشد.

#️⃣#tip #vue
👥@IR_javascript_group
🆔@IR_javascript

حالت بخار (Vapor Mode) در Vue.js یک استراتژی کامپایل جایگزین است که برای بهبود عملکرد برنامه‌های Vue.js طراحی شده است. این حالت به جای استفاده از Virtual DOM (VDOM)، کامپوننت‌ها را مستقیماً به HTML تبدیل می‌کند
‏vapor mode در vue 3.6 اضافه خواهد شد


#️⃣#tip #vue #dub
👥@IR_javascript_group
🆔@IR_javascript

برای کسانی که نمی‌دانند، در VS Code (با افزونه‌ی Volar) یک فرمان کاربردی وجود دارد که امکان تقسیم یک فایل به دو پنجره بر اساس بخش‌های SFC را فراهم می‌کند.

#️⃣#tool #vue
👥@IR_javascript_group
🆔@IR_javascript

ویدیو دوبله شده در مورد بهینه‌سازی عملکرد Vue [+لینک]

عملکرد بهینه یکی از عوامل کلیدی در اپلیکیشن‌های مدرن تحت وب است. عملکرد ضعیف منجر به کاهش تعامل کاربران، کاهش نرخ تبدیل و در نهایت از دست دادن فرصت‌های تجاری می‌شود. این دوره به شما کمک می‌کند تا:

زمان بارگذاری و عملکرد اجرایی اپلیکیشن Vue.js خود را به‌طور چشمگیری بهبود دهید.
تکنیک‌های پیشرفته بهینه‌سازی که توسط متخصصان صنعت استفاده می‌شود را اجرا کنید.
مشکلات عملکردی را به‌صورت کارآمد اشکال‌زدایی و برطرف کنید.
تصمیمات معماری آگاهانه‌ای اتخاذ کنید که بر سرعت برنامه تأثیر می‌گذارد.
تجربه‌ای استثنایی برای کاربران از طریق بهینه‌سازی عملکرد ارائه دهید.

به ما بپیوندید و با تسلط بر بهینه‌سازی عملکرد Vue.js، اپلیکیشن‌های خود را به سطحی جدید از سرعت و کارایی برسانید.


🔗https://www.aparat.com/v/tdvpkja?playlist=17549421
#️⃣#tip #dub #vue
👥@IR_javascript_group
🆔@IR_javascript

در CSS**، قابلیت **@scope برای محدود کردن دامنه‌ی اعمال استایل‌ها معرفی شده است:

### 🔹 مثال:

<template> 
  <div class="box"> 
    <button class="button">Click me</button> 
  </div> 
</template> 

<style> 
@scope (.box) { 
  .button { 
    color: red; 
  } 
}
</style>

این ویژگی می‌تواند در برخی موارد مفید باشد، اما جایگزین کاملی برای Vue Scoped Styles نیست.

### 🔸 تفاوت با Vue Scoped:
- در Vue، اگر یک کامپوننت را در یک لیست رندر کنید، هر نمونه‌ی کامپوننت یک data-attribute منحصر‌به‌فرد دارد که استایل‌های آن را جدا نگه می‌دارد.
- اما در @scope**، دامنه‌ی استایل‌ها ممکن است **با سایر نمونه‌ها ترکیب شود و یکپارچگی آن حفظ نشود.

با این حال، @scope برای موارد ساده و Vanilla CSS یک قابلیت کاربردی و مفید محسوب می‌شود. 🎨

#️⃣#tip #vue
👥@IR_javascript_group
🆔@IR_javascript

اگر یک آرایه دارید که هر عنصر آن شامل یک مقدار computed است، بهتر است یک مقدار computed برای کل آرایه ایجاد کنید تا اینکه برای هر عنصر جداگانه یک مقدار computed داشته باشید.

### نمونه نامناسب

const rows = productRows.map(row => ({ 
  ...row,
  total: computed(() => row.price * row.qty),
}));

### نمونه بهینه

const computedRows = computed(() => 
  productRows.map(row => ({ 
    ...row, 
    total: row.price * row.qty,
  }))
);

با این روش، محاسبات بهینه‌تر انجام می‌شود و از ایجاد چندین مقدار computed غیرضروری جلوگیری خواهد شد.

#️⃣#tip #vue
👥@IR_javascript_group
🆔@IR_javascript

در هسته‌ی Nuxt قابلیت هیدراسیون تنبل (Lazy Hydration) اضافه شده است—پس دیگر نیازی به ساخت راهکارهای سفارشی نیست! اما بیایید قدم‌به‌قدم بررسی کنیم.

### 🚀 Vue 3.5 و ارتقای SSR
در Vue 3.5 SSR بهبود یافته و حالا کامپوننت‌های غیرهم‌زمان (Async Components) می‌توانند زمان هیدراته شدن خود را از طریق استراتژی hydrate در API `defineAsyncComponent()` کنترل کنند. مثلاً، می‌توان تعیین کرد که یک کامپوننت فقط هنگام نمایش در صفحه هیدراته شود:

import { defineAsyncComponent, hydrateOnVisible } from 'vue';

const AsyncComp = defineAsyncComponent({ 
  loader: () => import('./Comp.vue'), 
  hydrate: hydrateOnVisible()
});

### 🔥 Nuxt 3.16 و پشتیبانی از Delayed Hydration
📅 در ۷ مارس ۲۰۲۵ نسخه‌ی Nuxt 3.16 منتشر شد که شامل ویژگی‌های جدید، بهبود عملکرد، ابزارهای توسعه‌ی بهتر و... بود، اما مهم‌ترین قابلیت اضافه‌شده، Delayed Hydration است. توسعه‌دهندگان Nuxt در وبلاگ خود جزئیات این قابلیت را توضیح داده‌اند.

#### ✅ مثال: هیدراته شدن کامپوننت هنگام ورود به ویوپورت

<!-- کامپوننت تنها زمانی هیدراته می‌شود که در محدوده‌ی دید کاربر قرار بگیرد -->
<LazyExpensiveComponent hydrate-on-visible />

✅ حالا کامپوننت فقط وقتی در زون دید کاربر قرار بگیرد، لود و اجرا می‌شود—دیگر نیازی به نوشتن اسکریپت‌های پیچیده برای ردیابی و بارگذاری نیست.

🔹 همچنین می‌توان از hook جدید `hydrated` برای اجرای دستورات خاص پس از هیدراته شدن کامپوننت استفاده کرد:

<LazyComponent hydrate-on-visible @hydrated="onComponentHydrated" />

### 📌 چه خبر؟
🔹 این ویژگی تنظیمات مختلفی دارد که می‌توانید نحوه‌ی کارکرد آن را در مستندات Nuxt مطالعه کنید.
🔹 Nuxt به‌سرعت در حال پیشرفت است و وقت آن رسیده که این قابلیت را در محیط Production تست کنیم.
🔹 شاید وقتش رسیده که کامپوننت‌های سمت سرور (Server Components) را هم امتحان کنیم؟ (قابلیت آزمایشی nuxt-islands – اما این بحث را می‌گذاریم برای بعد 😉)

#️⃣#tip #vue
👥@IR_javascript_group
🆔@IR_javascript

### چرا باید از استفاده کنترل‌نشده از watch پرهیز کرد؟

#### یک. برهم خوردن جریان واکنشی (Reactive Flow)
استفاده از watch گاهی باعث پنهان شدن منطق واکنش‌گرایی می‌شود. برای مثال:

watch(() => userId.value, async (newId) => {
  const data = await fetchUserData(newId);
  userData.value = data;
});

در ظاهر ساده است، اما وقتی همین کد در چند مؤلفه با داده‌های مشابه یا اثرات جانبی دیگر تکرار شود، کنترل جریان داده‌ها سخت‌تر شده و رفتار برنامه غیرقابل پیش‌بینی می‌شود.

Vue معماری واکنش‌گرای یک‌طرفه (از داده به UI) را ترویج می‌دهد، اما watch اغلب برای تبدیل داده به داده استفاده می‌شود که جریان را پیچیده می‌کند و اشکال‌زدایی را دشوارتر می‌سازد.

#### دو. کاهش خوانایی و دشواری در نگه‌داری

وقتی در یک مؤلفه چندین watch به‌صورت زنجیره‌ای نوشته شوند، ساختار کد به‌شکل کلاف سردرگمی درمی‌آید که فهم آن زمان‌بر است:

watch(() => settings.value.theme, applyTheme);
watch(() => settings.value.language, loadTranslations);
watch(() => settings.value.notifications, updateNotifications);

این نوع پراکندگی منطق در `watch`ها:

- خوانایی کد را پایین می‌آورد
- بازسازی (refactor) و انتقال منطق به composableها را دشوار می‌کند

در مقابل، می‌توان این رفتارها را در یک computed مجتمع یا composable مشخص و مستقل تعریف کرد.

#### سه. تأثیر منفی بر عملکرد

مثلاً اگر یک شیء عمیق را با deep: true مانیتور کنید:

watch(settings, (newVal, oldVal) => {
  // مقایسه عمیق کل ساختار
}, { deep: true });

اگر settings شامل اشیاء یا آرایه‌های بزرگ باشد، عملکرد برنامه افت خواهد کرد. از طرفی، بسیاری از کاربردهای watch را می‌توان با computed حل کرد:

const isDarkTheme = computed(() => settings.value.theme === 'dark');

ویژگی‌های محاسبه‌شونده کش می‌شوند، سبک‌تر هستند و اجرای بهتری دارند.

#### چهار. خطر نشت حافظه (Memory Leak)

در مؤلفه‌هایی که با شرط v-if نمایش داده می‌شوند، اگر watch بدون مدیریت درست ایجاد شود:

<template>
  <div v-if="showComponent">
    <SomeComponent />
  </div>
</template>

و در SomeComponent بنویسیم:

watch(async() => someReactiveValue.value, await doSomething);

اگر این watch هنگام نابودی مؤلفه (unmount) لغو نشود، به‌مرور زمان منابع حافظه را اشغال کرده و باعث نشت حافظه می‌شود.

---

### ✅ راهکار پیشنهادی

قبل از استفاده از `watch`، ابتدا این پرسش را از خودتان بپرسید:

> «آیا می‌توان این مسئله را با `computed`، `props` یا emit حل کرد؟»

در بسیاری از موارد پاسخ *بله* است، و انتخاب راه‌حل‌های اعلانی (declarative) باعث خوانایی، عملکرد بهتر و مدیریت ساده‌تر خواهد شد.



#️⃣#tip #vue
👥@IR_javascript_group
🆔@IR_javascript