در ادامه‌ی این سری آموزش‌ Vue.js به توضیح دقیق نمونه‌ها یا همان Intanceهای اشیاء باشد، می‌پردازیم.

سازنده‌ها (Constructor)

هر المان و دستوری از فریم ورک Vue.js به صورت تکنیک برنامه‌نویسی شیءگرایی می‌باشد. در فریم ورک Vue.js هر View و Model ( در اینجا منظور از ViewModel استفاده از عبارت vm، قبل از دستورها می باشد). توسط یک نمونه‌ از هسته‌ی Vue به همراه یک سازنده ساخته می‌شود:

var vm = new Vue({
   // Options
})

اگر چه الگوی Vue دقیقا شبیه به MVVM (الگوی Model View View Model) نیست، اما بدون شک از این الگو الهام گرفته است. به عنوان یک قانون و قرارداد، اغلب از دستور و متغیر vm (به اختصار ViewModel) برای اشاره به نمونه‌های Vue استفاده می‌کنیم.

هنگامیکه شما یک شیء از Vue را مقداردهی اولیه می‌کنید، نیاز به ارسال تنظیمات شیء که شامل گزینه‌ی داده‌ها، قالب‌ها، المان‌ها، متدها، چرخه‌های دستوری قبل و بعد از اجرا، آپدیت و تخریب یک شیء ( Lifecycle Callbacks، به عنوان یک تابع خودکار عمل میکند که قبل و بعد از دستورهای Model اجرا می شود، به عنوان مثال hash کردن یک پسورد قبل از ذخیره کردن آن در بانک اطلاعاتی) می باشد. لیست دقیقی از این موارد را در جلسات بعدی مورد بررسی قرار می‌دهیم.

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

var MyComponent = Vue.extend{
	// گزینه های ابزارها
}
// all instances of `MyComponent` are created with
// the pre-defined extension options
var myComponentInstance = new MyComponent()

در Vue همچنین امکان ساخت نمونه‌های به ارث برده شده وجود دارد. در ارتباط با سیستم‌ کامپوننت ها در جلسات آینده مفصل توضیح خواهیم داد. در این آموزش شما فقط درنظر داشته باشید که تمام کامپوننت‌های Vue از نمونه‌ی اصلی Vue ارث‌بری می کنند.

ویژگی‌ها و متدها (Properties and Methods)

هر نمونه‌ی در فریم ورک Vue.js نماینده‌ تمام ویژگی‌های موجود در شیء data آن است. به این معنی که هر چیزی که درون عبارت و شیء data تعریف شود به عنوان یک ویژگی داخل نمونه‌ مورد استفاده قرار می‌گیرد. به مثال‌های زیر توجه کنید:

var data = { a: 1 }
var vm = new Vue({
	data: data
})

vm.a === data.a // -> صحیح

// انتساب یک مقدار به یک داده: 

vm.a = 2
data.a // -> مقدار 2 جایگزین می شود

data.a = 3
vm.a // -> مقدار 3 جایگزین می شود

به این نکته توجه داشته باشید که تمامی این ویژگی‌ها واکنشی هستند! اگر شما پس از ساخت یک نمونه، یک ویژگی جدید به آن اضافه کنید، این ویژگی در هر آپدیت ویوو راه اندازی نخواهد شد. (به طور جامع در ارتباط با سیستم واکنشی صحبت خواهیم کرد).

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

var data = { a: 1 }
var vm = new Vue({
	el: '#laravelApp',
	data: data
})

vm.$data === data // ->صحیح
vm.$el === document.getElementById('laravelApp') // -> صحیح

// $watch is a method
vm.$watch('a', function(newVal, oldVal){
	// this callback will be called when `vm.a` changes
})

چرخه حیات هوک‌ها و نمونه‌سازی در Vue.js

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

جهت تفهیم این موضوع مثال زیر را جهت فراخوانی هوک created بعد از ساخت نمونه، شرح خواهیم داد:

var vm = new Vue({
	data: { a: 1 },
	created: function(){
		// 'this' points to the vm instance
		console.log('a is: ' + this.a)
	}
})
// -> "a is: 1"

همانگونه که مشاهده ‌می‌کنید در شیء بالا یک نمونه از Vue ساخته شد که درون آن متغیر data که حاوی داده‌هاست، متغیر a را با عدد 1 مقداردهی کرده است. پس از آن هوک created به عنوان یک تابع عمل کرده و مقدار a is: 1 را داخل کنسول جاوا در مرورگر شما به نمایش می‌گذارد. حال، اگر یک نمونه‌ی vm داخل یک کد html فراخوانی شود، ابتدا نمونه ساخته شده فراخوانی می‌شود و سپس به واسطه‌ی هوک created، عبارت a is: 1 را برای شما نمایش داده خواهد شد.

همچنین می‌توان هوک‌های دیگری را در مراحل مختلف اجرای یک نمونه فراخوانی کرد. مثلا هوک‌های mounted, updated و destroyed. تمام چرخه‌های حیات هوک‌ها توسط عبارت this فراخوانی می‌شوند که به نمونه‌ی ایجاد شده‌ی Vue و تمام استناد آن اشاره می‌کند. تا به اینجای کار ممکن است حیرت زده باشید که کنترلر (Controller) در کدام قسمت از فریم ورک قدرتمند Vue.js قرار داده شده است؟ در پاسخ باید بگوییم: Vue هیچگونه کنترلی ندارد. بنابراین، برای یک کامپوننت تمام دستورهای منطقی و دلخواه شما به چرخه‌های کوچک Hook تقسیم می‌شوند.

دیاگرام چرخه حیات

در ادامه دیاگرامی از چرخه حیات یک نمونه در فریم ورک Vue.js، نمایش داده خواهد شد. توجه داشته باشید که نیازی به فهمیدن کامل و دانستن تمام بخش های این دیاگرام ندارید، چون تمام بخش‌ها به صورت کامل در ادامه بررسی می‌شوند.

لاراول
فقط
خوش آمدید!
ایجاد حساب کاربری