هر آنچه که در مورد v-model باید بدانید

مقدمه

با دانستن این موضوع شروع می‌کنیم که، v-model یک directive ویو‌جی‌اس هست که ارتباطی ۲ طرفه یا همان two way data binding را، بین template و داده‌ها(Data) ایجاد می‌کند. استفاده‌ی رایج از v-model هنگام کار با فرم‌ها می‌باشد،‌ یعنی زمانی که inputهای یک فرم به داده‌ها(Data) متصل می‌شوند و مقدار آن‌ها را تعیین می‌کنند.‌

برای مثال به قطعه کد زیر که از v-model روی یک text input استفاده کرده‌ایم توجه کنید.

<template>
  <div>
    <input type=&quottext&quot v-model=&quotvalue&quot />
    <p>Value: {{ value }}</p>
  </div>
</template>

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

const value = ref('')

با اجرای کد فوق متوجه خواهید شد که با اعمال هر تغییر در input مقدار متغیر value که توسط دایرکتیو v-model به آن متصل(bind) شده است نیز تغییر می‌کند. این رویداد اشاره به همان مفهوم two way data binding دارد که با تغییر در input، مقدار متغیر bind شده به آن نیز عوض می‌گردد و بلعکس با تغییر مقدار value، مقدار نوشته شده درون input نیز تغییر خواهد کرد.

تفاوت بین v-model و v-bind

گاهی اوقات پیش می‌آید که تازه‌کارها، دایرکتیو v-bind را به جای v-model استفاده می‌کنند اما در حقیقت این دو با یکدیگر تفاوت دارند و مهم‌ترین تفاوت بین این دو directive این است که v-bind بر خلاف v-model ارتباطی ۲ طرفه را ایجاد نمی‌کند. در مثال بالا مفهوم two way data binding را مشاهده کردید اما اگر در مثال بالا به جای استفاده از v-model بر روی input، از v-bind استفاده کرده بودیم، در بار نخست، مقدار value درون input قرار می‌گرفت اما با تغییر مقدار input، مقدار متغیر value تغییری نمی‌کرد. چون v-bind ارتباطی یک طرفه را ایجاد می‌کند(بر خلاف v-model). در نگاه نخست ممکن است تفاوت قابل ملاحظه‌ای نباشد اما باید هنگام انتخاب و استفاده از این دو directive محتاط عمل کنیم و ببینیم که به کدام نوع ارتباط(یک طرفه یا دو طرفه) نیاز داریم.

اصلاح‌کننده‌های v-model

ویو‌جی‌اس به صورت پیش‌فرض، چند اصلاح‌ کننده (modifiers) را برای کار با v-model معرفی کرده است که عملکرد v-model را تغییر می‌دهند.

اصلاح کننده‌ی layz.

به طور پیش‌فرض رفتار v-model به این شکل است که اگر داده‌ای توسط v-model به یک input متصل کنیم،‌ هر تغییری که در مقدار input بدهیم آن تغییر بلافاصله بر مقداری که input به آن متصل(bind) است، اعمال می‌شود به عبارت دیگر می‌توان گفت که v-model مقدار بین داده و input را sync نگه می‌دارد. اما اگر از modifier یا اصلاح کننده‌ی lazy. استفاده کنیم، متغیر متصل شده به input و مقدار درون input زمانی هماهنگ می‌شوند که تغییر درون input کامل شود و یا به عبارت focus از روی input برداشته شود.

<input type=&quottext&quot v-model.lazy=&quotvalue&quot />

در حالت معمولی با نوشتن هر کارکتر درون یک input مقدار متصل شده به آن از طریق v-model، نیز به روزرسانی می‌شود اما هنگامی که از lazy. استفاده می‌کنیم، هر تغییری که درون text input بدهیم زمانی با داده‌ی متصل شده به آن هماهنگ می‌شود که focus از روی input برداشته شود. این ویژگی باعث می‌شود تا تعداد دفعاتی که v-model سعی می‌کند داده‌ی متصل به input را بروز رسانی کند کاهش یابد و این ویژگی در مواردی باعث افزایش و بهبود عملکرد نیز خواهد شد.

ادامه‌ی مطلب را از اینجا مطالعه فرمایید.