تغییرات جدید ویو جی اس (VueJS) 3.5

فریم ورک ویو جی اس ورژن 3.5 متشر کرد و در این ورژن یک سری قابلیت و بهبود های خوبی شاهد هستیم و در این پست به صورت کامل این تغییرات بررسی میکنیم. بزن بریییییم!

Reactive Props Destructure

در ورژن های قبل، برای دسترسی به پروپس (props) به صورت واکنشی (reactively) و استفاده از آنها، از تابع toRef() استفاده می‌شد. اما در ورژن 3.5 شما میتونید خیلی راحت این کار انجام دهید:

<script setup>
// Before
const props = defineProps(['count'])
const count = toRef(props, 'count')
 
// Now in Vue 3.5
const { count } = defineProps(['count'])
 
// It's reactive out of the box!
watchEffect(() => {
    console.log(count)
})
</script>

همینطور برای اینکه بخواید یک props با یک مقدار پیشفرض بسازید میتونید از سینتکس جدید استفاده کنید که کد کمتری میشه نوشت:

// Before
const props = defineProps({
    count: {
    type: Number,
        default: 0,
    },
    message: {
    type: String,
        default: 'Laravel + Vue rocks!',
    },
})
 
// Now in Vue 3.5
const { count = 0, message = 'Laravel + Vue rocks!' } = defineProps({
    count: Number,
    message: String,
})

useTemplateRef(): Clearer Template Refs

برای اینکه بخواید داستان "template refs" هندل کنید، ویو یک راه براتون گذاشته اونم استفاده از useTemplateRef() هست:

<script setup>
    import { useTemplateRef } from 'vue'
     
    const inputRef = useTemplateRef('input')
</script>
 
<template>
    <input ref="input">
</template>

حالا با هم یک مثال ببینیم:

// useAutoFocus.js
import { useTemplateRef, onMounted } from 'vue'
 
export function useAutoFocus(refName) {
    const elementRef = useTemplateRef(refName)
 
    onMounted(() => {
        elementRef.value?.focus()
    })
 
    return elementRef
}
 
// MyComponent.vue
<script setup>
import { useAutoFocus } from './useAutoFocus'
 
const inputRef = useAutoFocus('inputRef')
    </script>
 
<template>
    <input ref="inputRef" v-model="someData" />
</template>

در این مثال ما یک "useAutoFocus" درست کردیم که از useTemplateRef() استفاده میکنه که زمانی که mount میکنه مقدارش رو میگیره. برای همین میتونیم چند بار از این کد استفاده کنیم بدون نیاز به duplicate کردن اون!

useId(): Generate Unique IDs

در ویو جی اس 3.5 یک چیزی به نام useId معرفی کرد که هدفش ساخت یک شناسه (ID) یکتا هست که در رندرد کردن سمت سرور و کلاینت ها پایدار هستند:

<script setup>
import { useId } from 'vue'

const id = useId()
    </script>

<template>
    <form>
        <label :for="id">Name:</label>
        <input :id="id" type="text" />
    </form>
</template>

این روش برای پایداری فرم های در اپلیکیشن SSR مفید هست.

SSR Improvements: Lazy Hydration and More

در ویو جی اس 3.5 یک سری تغییرات خوب صورت گرفته:

1. Lazy Hydration: این قابلیت شما میتونید کنترل کنید که چه زمانی کامپوننت async حالت hydrated فعال بشه:

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

2. data-allow-mismatch: هنگامی که یک اپلیکیشن سمت سرور رندر (SSR) شده و سپس در سمت کلاینت (CSR) بارگذاری می‌شود، ممکن است به دلایلی، خروجی سمت سرور با چیزی که سمت کلاینت نمایش داده می‌شود، تفاوت‌هایی داشته باشد (به این حالت mismatch یا عدم تطابق گفته می‌شود). به‌طور پیش‌فرض، این عدم تطابق‌ها هشدارهایی را ایجاد می‌کنند.

با تنظیم data-allow-mismatch، این هشدارها دیگر نمایش داده نمی‌شوند، زیرا این عدم تطابق‌ها ممکن است در برخی موارد اجتناب‌ناپذیر یا مورد انتظار باشند (مثل مواردی که محتوای پویا یا داده‌های متفاوت بر اساس محیط وجود دارد):

<template>
    <span data-allow-mismatch>{{ data.toLocaleString() }}</span>
</template>

Performance Boost

ویو جی اس در مبحث performance یک سری تغییرات خیلی خوبی داده که در لیست زیر میتونید مشاهده کنید:

• کاهش %56 درصدی در استفاده از حافظه (memory)
• تا 10x برابر عملیات سریعتر روی آرایه های بزرگ

این تغییرات به این معنی هست که اپلیکیشن شما سریع تر میشود و روی عملیات های بزرگ سریع تر عمل میکنه.

Other Cool Features

ویو جی اس یک سری تغییرات دیگری داشته که نسبتا بد نیستند:

• Deferred Teleport: کامپوننت <Teleport> دارای پراپرتی جدیدی به نام defer است. این ویژگی به شما اجازه می‌دهد تا محتوای تله‌پورت شده را پس از اتمام چرخه‌ی رندر فعلی قرار دهید. این قابلیت زمانی مفید است که بخواهید محتوایی را به عناصر (DOM) انتقال دهید که ممکن است در هنگام اولین رندر کامپوننت وجود نداشته باشند.
• onWatcherCleanup(): ویو جی اس 3.5 یک API جدید به نام onWatcherCleanup() معرفی کرده که به صورت سراسری وارد (import) می‌شود. این API ثبت کالبک‌های پاک‌سازی در واچرها (watchers) را آسان‌تر می‌کند. این ویژگی برای مدیریت اثرات جانبی در واچرها عالی است. حالا می‌توانید به راحتی درخواست‌های معلق را لغو کنید، تایمرها را پاک کنید، یا هر عملیات پاک‌سازی دیگری را انجام دهید زمانی که واچر در حال دوباره اجرا شدن است یا اینکه از بین می‌رود. 

import { ref, watch, onWatcherCleanup } from 'vue'
 
const userInput = ref('')
const debouncedInput = ref('')
 
watch(userInput, (newValue) => {
    const timer = setTimeout(() => {
        debouncedInput.value = newValue
    }, 500)
 
    onWatcherCleanup(() => {
        clearTimeout(timer)
    })
})

جمع بندی

Vue 3.5 یک به‌روزرسانی پایدار است که بهبودهای خوبی برای کیفیت کار توسعه‌دهندگان به همراه دارد. دو ویژگی Reactive Props Destructure و useTemplateRef() از موارد مورد علاقه من هستند، زیرا کد ما را تمیزتر و خواناتر می‌کنند.

برای دیدن فایل changelog.md این ورژن کلیک کنید.