نحوه مدیریت داده‌ها در شیء Vue

?How to Manage Data in the Vue Object

اگر یادتان باشد در قسمت قبل توضیح دادم که Vue تمام خصوصیات و method های ما را proxy می کند. می خواهم کمی بیشتر در این باره صحبت کنم. مثلا به کد زیر دقت کنید:

var vm2 = new Vue ({
  el: '#app2',
  data: {
    title: 'The second instance'
  },
  methods: {
    onChange: function () {
      vm1.title = 'Changed!';
    }
  }
});

ما در اصل شیء Vue بالا را نمی سازیم. ما با کلیدواژه new متد constructor را صدا می زنیم و constructor است که این شیء را می سازد. به همین خاطر اصلا نمی دانیم این شیء چه خصوصیاتی دارد مگر اینکه به documentation آن مراجعه کنیم. نکته اصلی اینجاست که این شیء قطعا خصوصیاتی که ما برایش تعریف کرده ایم را ندارد (امیدوارم با برنامه نویسی شیء گرا آشنا باشید – در این نوع برنامه نویسی خصوصیات در هنگام نوشتن کلاس تعریف می شوند نه هنگام ساخت نمونه از کلاس). مثلا در کد بالا می دانید که title یکی از خصوصیات کلاس Vue نیست، بلکه ما آن را به عنوان آرگومان به constructor کلاس Vue پاس داده ایم.

زمانی که constructor آرگومان ما را دریافت می کند (شیء ای که به new Vue پاس می دهیم) خصوصیات data و methods و غیره را برداشته و به نوعی آن ها را کپی می کند تا به شکل خصوصیات واقعی قابل استفاده باشند. البته پشت صحنه پیچیده تر از این حرف ها است. مثلا برای هر کدام از این خصوصیات یک watcher (نگهبان – زیر نظر می گیرد) می گذارد تا بداند چه زمانی چه خصوصیتی تغییر کرده است و باید چه چیزی را به روز رسانی کند. به این عملیات proxy کردن می گوییم.

نکته دیگر این است که اگر بخواهید یک خصوصیت جدید را به شکل زیر به شیء Vue اضافه کنید، باعث بروز مشکلاتی خواهید شد:

var vm2 = new Vue ({
  el: '#app2',
  data: {
    title: 'The second instance'
  },
  methods: {
    onChange: function () {
      vm1.title = 'Changed!';
    }
  }
});

vm2.newProperty = 'New';

کد بالا از نظر جاوا اسکریپت ساده معتبر است بنابراین خطایی نمی گیرید و خصوصیت newProperty به شیء ما اضافه می شود اما اصلا واکنش پذیر یا reactive نیست. یعنی Vue برای آن watcher نمی گذارد و آن را proxy نمی کند بنابراین با تغییر آن هیچ اتفاقی رخ نخواهد داد. من می توانم با log کردن این شیء، آن را به شما ثابت کنم:

vm2.newProperty = 'New';
console.log(vm2);

با اجرای کد بالا در قسمت کنسول مرورگر انواع خصوصیات شیء Vue را می بینید:

همانطور که در تصویر بالا مشاهده می کنید، خصوصیات دیگر ما lowercaseTitle و title در بین خصوصیات دیگر Vue هستند اما newProp بدون هیچ proxy و watcher ای به صورت تنها اضافه شده است. توجه به این مسئله بسیار مهم بود. در بین این خصوصیات چاپ شده، خصوصیات دیگری را نیز مشاهده می کنیم. به طور مثال:

تعداد این خصوصیات بیشتر از آن است که بخواهیم در یک جلسه همه آن ها را توضیح بدهیم اما می خواهم در رابطه با چند مورد خاص (موارد مشخص شده با مربع نارنجی در تصویر بالا) صحبت کنم. خصوصیت el همان el داخل شیء Vue است که template کد HTML ما را هدف می گیرد. این خصوصیت به Vue اجازه می دهد که قسمت دلخواه ما را زیر نظر بگیرد.

Data$ نیز یک شیء است که تمام خصوصیات ما در data را درون خود نگه می دارد. بنابراین هر دو کد زیر برای دسترسی به خصوصیات، صحیح است:

console.log(vm1.title);
console.log(vm1.$data.title);

چرا؟ به دلیل اینکه data$ همان بلوک data در شیء Vue می باشد. برای اثبات این مسئله به شکل زیر عمل می کنم:

var data = {
  title: 'The VueJS Instance',
  showParagraph: false
}

var vm1 = new Vue({
  el: '#app1',
  data: data,
  methods: {
// بقیه کدها //

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

console.log(vm1.$data === data);

یعنی آیا data درون شیء Vue با متغیر data خارج از آن یکی است؟ اگر کد بالا را اجرا کنید، عبارت true در کنسول مرورگر چاپ خواهد شد. این یک روش دیگر برای تعریف کردن data های شما است. شاید برخی از اوقات نخواهید همه چیز را درون شیء Vue بنویسید و آن را مانند من جداگانه تعریف کنید. نکته مهم اینجاست که فریم ورک Vue دنیای بسته خودش را نساخته است بلکه با کدهای ساده جاوا اسکریپت نیز تعامل دارد. البته بهتر است که اگر از Vue برای کنترل بخشی از کدهای HTML استفاده می کنید، دیگر با کدهای ساده جاوا اسکریپتی آن قسمت را دستکاری نکنید چرا که ممکن است واکنش پذیری یا reactivity فریم ورک Vue را بهم بریزید و خطا های عجیب و غریب بگیرید.

البته حواستان باشد که ما هنوز در ابتدای دوره هستیم و هنوز به قسمتی نرسیده ایم که بخواهیم برنامه هایمان را فقط با Vue بنویسیم. در حال حاضر تنها قسمت هایی از برنامه را با Vue کنترل می کنیم و بحث نوشتن یک وب سایت کامل SPA (مخفف Single Page Application) بحث جدایی است.