درباره Vue.js Watchers برای بهبود توسعه برنامه وب خود بیاموزید

از ناظران برای نظارت بر تغییرات استفاده کنید و رفتار را به صورت شهودی‌تر اجرا کنید.

نکات کلیدی

• چارچوب‌های جاوا اسکریپت مانند Vue ویژگی‌هایی مانند معماری اجزا، مدیریت وضعیت و مسیریابی را برای ساده‌سازی توسعه برنامه‌های وب ارائه می‌کنند.
• Vue watchers توابعی هستند که تغییرات در ویژگی‌های واکنشی را کنترل می‌کنند و به شما امکان می‌دهند به رویدادها و اصلاح داده‌ها واکنش نشان دهید.
• با مقایسه تماشاگرها با ویژگی‌های محاسبه‌شده، ویژگی‌های محاسبه‌شده مختصرتر و راحت‌تر خوانده می‌شوند و در نتیجه عملکرد و اشکال‌زدایی بهتری دارند.

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

Vue، یکی از این چارچوب‌ها، ویژگی‌های زیادی را برای سرعت بخشیدن به توسعه ارائه می‌کند. ویژگی ساعت به شما امکان می دهد مقادیر متغیرها و عبارات را در طول اجرای برنامه نظارت کنید.

Watchers در Vue چیست؟

Vue watchers توابعی هستند که تغییرات در یک ویژگی واکنشی را کنترل می کنند و بر اساس آن پاسخ می دهند. ناظران به شما اجازه می دهند به رویدادها و اصلاح داده ها واکنش نشان دهید.

برای استفاده از تماشاگر، تابع watch را از بسته vue در اسکریپت خود وارد کنید:

<script setup>
import { watch } from 'vue';
</script>

اکنون می توانید از تابع ساعت برای پیاده سازی یک تماشاگر در کامپوننت Vue خود استفاده کنید. در اینجا یک مثال ساده است:

<template>
  <div>
    <p>{{ user }}</p>
    <button @click="changeName">Change Name</button>
  </div>
</template>

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

const user = ref('Chinedu');

const changeName = () => {
  user.value = 'Victor'; // Change the user's name
};

watch(user, (newUser, oldUser) => {
  alert(`User name changed from "${oldUser}" to "${newUser}"`);
});
</script>

این جزء ساده از عملکرد ساعت برای نظارت بر تغییر نام کاربر استفاده می کند. بخش الگوی قطعه، ساختار HTML کامپوننت را تعریف می کند که شامل یک تگ p است که مقدار متغیر واکنشی کاربر را نمایش می دهد.

این الگو همچنین حاوی یک عنصر دکمه است که یک تابع changeName به شنونده رویداد کلیک متصل است. هنگامی که متغیر کاربر تغییر می کند، Vue عملکرد برگشت به تماس را فعال می کند. عملکرد برگشت به تماس یک هشدار را نشان می دهد: “نام کاربری از “Chinedu” به “Victor” تغییر کرد.

مقایسه Watchers با ویژگی های محاسبه شده

درک تفاوت بین ناظران و ویژگی های محاسبه شده مهم است. اگرچه هر دو به عنوان ابزار واکنش پذیری در Vue استفاده می شوند، شما باید از آنها برای اهداف مختلف استفاده کنید.

به عنوان مثال، می توانید مجموع سن پدر و پسر را با ناظران محاسبه کنید، مانند این:

<template>
  <input type="text" placeholder="Father's Age" v-model="father">
  <input type="text" placeholder="Son's Age" v-model="son">
  <p>Total Age: {{ total }}</p>
</template>

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

const father = ref();
const son = ref();
const total = ref();

watch(son, (newAge, oldAge) => {
  total.value = Number(father.value) + Number(newAge)
})

watch(father, (newAge, oldAge) => {
  total.value = Number(newAge) + Number(son.value)
})

</script>

این جزء Vue از تماشاگرها برای بدست آوردن مجموع سن پدر و پسر استفاده می کند. برای انجام این کار، یک متغیر واکنشی جدید به نام total ایجاد می کند. وقتی از Vue’s Composition API استفاده می کنید، می توانید یک متغیر واکنشی ایجاد کنید.

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

همان سناریو را در قطعه بالا در نظر بگیرید که از ویژگی های محاسبه شده استفاده می کند:

<template>
  <input type="text" placeholder="Father's Age" v-model="father">
  <input type="text" placeholder="Son's Age" v-model="son">
  <p>Total Age: {{ total }}</p>
</template>

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

const father = ref();
const son = ref();

const total = computed(() => {
  return Number(father.value) + Number(son.value);
});

</script>

این قطعه، در مقایسه با قبلی، مختصرتر و راحت‌تر خوانده می‌شود. این قطعه مجموع سن پدر و پسر را دریافت می کند و آن را در یک ref محاسبه شده (متغیر)، کل ذخیره می کند. سپس بخش الگو کل متغیر را با استفاده از درون یابی، یک تکنیک اتصال داده در Vue نمایش می دهد.

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

از تماشاگرها به عنوان جایگزینی برای ویژگی های محاسبه شده استفاده نکنید. وقتی می‌خواهید داده‌های جدید را از داده‌های واکنشی موجود استخراج کنید، از ناظران برای نظارت و واکنش به تغییرات داده‌ها و ویژگی‌های محاسبه‌شده استفاده کنید.

گزینه فوری در دسترس تماشاگران در Vue

گزینه فوری پیکربندی است که می توانید هنگام ایجاد یک تماشاگر از آن استفاده کنید. این گزینه تعیین می کند که آیا تماشاگر باید بلافاصله پس از اینکه Vue کامپوننت را نصب کرد، پاسخ تماس خود را راه اندازی کند یا خیر.

در اینجا نمونه ای از کامپوننت با استفاده از تماشاگر با گزینه فوری آورده شده است:

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

const count = ref(10);

watch(
  count,
  (newCount, oldCount) => {
    console.log(`Count changed from ${oldCount} to ${newCount}`);
  },
  { immediate: true }
);
</script>

در قطعه بالا، تماشاگر بلافاصله پس از مقداردهی اولیه کامپوننت، تماس برگشتی خود را اجرا می کند و «تعداد تغییر از تعریف نشده به 10» را به کنسول وارد می کند. این نشان می دهد که متغیر اولیه قبل از اینکه Vue مقدار 10 را به شماره ref تزریق کند، تعریف نشده بود.

گزینه فوری می تواند در سناریوهایی مفید باشد که می خواهید یک اقدام اولیه یا مقداردهی اولیه را بر اساس مقدار فعلی ویژگی تماشا شده انجام دهید. به عنوان مثال، هنگامی که Vue یک مؤلفه را نصب می کند، زمانی که به برنامه خود نیاز دارید تا داده ها را از یک API واکشی کند.

گزینه Deep موجود در Vue Watchers

گزینه عمیق موجود هنگام کار با تماشاگران در Vue، مشاهده عمیق تغییرات درون اشیاء یا آرایه های تودرتو را امکان پذیر می کند. وقتی روی true تنظیم شود، ناظر می‌تواند تغییرات درون ویژگی‌های تودرتو را تشخیص دهد.

در اینجا نمونه ای از کامپوننت Vue با گزینه عمیق آورده شده است:

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

const data = ref({ length: 42 });

watch(
  data,
  (newData, oldData) => {
    console.log(`Data changed"`);
  },
  { deep: true }
);

// This will trigger the watcher because it's a deep change
data.value.length = 43;
</script>

قطعه بالا ref داده را با یک شی حاوی ویژگی length مقداردهی اولیه می کند. اسنیپت گزینه عمیق را روی true تنظیم می کند. سپس به کنسول وارد می شود که داده ها از زمانی که ویژگی length به 43 تغییر کرده است تغییر کرده است.

بدون گزینه عمیق که روی true تنظیم شده باشد، عملکرد ساعت هیچ تغییری در شیء مشاهده نخواهد کرد. با این حال، Vue همه تغییرات تودرتو و عمیق را بدون گزینه عمیق، زمانی که متغیر داده را به عنوان یک شی واکنش دهنده مقداردهی اولیه می کنید، ردیابی می کند:

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

const data = reactive({ length: 42 });

watch(
  data,
  (newData, oldData) => {
    console.log(`Data changed"`);
  }
);

// This will trigger the watcher because it changes a reactive object
data.length = 43;
</script>

تابع watch در قطعه بالا به کنسولی که داده ها تغییر کرده است وارد می شود زیرا متغیر داده یک شی واکنشی است.

با Vue Watchers برنامه های بهتر بسازید

ناظران Vue می‌توانند به شما در دستیابی به واکنش‌پذیری دقیق در برنامه‌هایتان کمک کنند. آنها کنترل می کنند که چگونه می توانید تغییرات در ویژگی های داده را مشاهده کنید و منطق سفارشی را در پاسخ اجرا کنید.

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

منبع مقاله