ایجاد نمونه Vue

اصول آموزش vuejs

تاریخ : سه شنبه 02 مهر 1398

ایجاد نمونه Vue (Creating a Vue Instance)

هر برنامه Vue با ایجاد یک نمونه جدید از Vue با استفاده از تابع Vue شروع می شود:

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

اگرچه کاملاً با الگوی MVVM مطابقت ندارد ، اما طراحی Vue تا حدی از آن الهام گرفته شده است. به عنوان یک قرارداد ، ما اغلب از متغیر vm (کوتاه برای ViewModel) برای مراجعه به نمونه Vue استفاده می کنیم.

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

Root Instance
└─ TodoList
   ├─ TodoItem
   │  ├─ DeleteTodoButton
   │  └─ EditTodoButton
   └─ TodoListFooter
      ├─ ClearTodosButton
      └─ TodoListStatistics

بعداً در مورد سیستم کامپوننت صحبت خواهیم کرد. در حال حاضر ، فقط بدانید که همه کامپوننت های Vue نیز نمونه های Vue هستند


اصول دیتا و متد (Data and Methods)

هنگامی که یک نمونه Vue ایجاد شد ، تمام خصوصیاتی را که در شیء داده آن یافت می شود به سیستم واکنش پذیری Vue اضافه می شود. هنگامی که مقادیر آن خصوصیات تغییر می کند ، لایه view "واکنش" می دهد و به روز می شود تا با مقادیر جدید مطابقت داشته باشد.

// Our data object
var data = { a: 1 }

// The object is added to a Vue instance
var vm = new Vue({
  data: data
})

// Getting the property on the instance
// returns the one from the original data
vm.a == data.a // => true

// Setting the property on the instance
// also affects the original data
vm.a = 2
data.a // => 2

// ... and vice-versa
data.a = 3
vm.a // => 3

با تغییر این داده ها ، view مجددا رندر می شود. لازم به ذکر است که خواص موجود در data تنها در صورتی واکنش نشان می دهند که در زمان ایجاد نمونه وجود داشته باشند. این بدان معناست که اگر یک ویژگی جدید اضافه کنید ، مانند:

vm.b = 'hi'

تغییرات در b باعث بروز رسانی در view نمی شود. اگر بدانید بعداً به یک خاصیت احتیاج دارید ، اما در ابتداخالی یا غیر موجود است ، شما در ابتدا باید مقداری اولیه تعیین کنید. برای مثال:

data: {
  newTodoText: '',
  visitCount: 0,
  hideCompletedTodos: false,
  todos: [],
  error: null
}

تنها استثنا در این مورد استفاده از ()Object.freeze است که از تغییر خصوصیات موجود جلوگیری می کند و این بدان معنی است که سیستم واکنش پذیری نمی تواند تغییرات را ردیابی کند.

var obj = {
  foo: 'bar'
}

Object.freeze(obj)

new Vue({
  el: '#app',
  data: obj
})
<div id="app">
  <p>{{ foo }}</p>
  <!-- this will no longer update `foo`! -->
  <button v-on:click="foo = 'baz'">Change it</button>
</div>

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

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

vm.$data === data // => true
vm.$el === document.getElementById('example') // => true

// $watch is an instance method
vm.$watch('a', function (newValue, oldValue) {
  // This callback will be called when `vm.a` changes
})

می توانید برای داشتن لیست کاملی از خصوصیات و متدها ، به API reference مراجعه نمایید.


چرخه سیستم (Instance Lifecycle Hooks)

هر نمونه Vue هنگام ایجاد یک سری مراحل اولیه سازی را طی می کند - برای مثال ، باید data را تنظیم کند ، قالب را کامپایل کند ، نمونه را روی DOM سوار کند و در هنگام تغییر داده ها DOM را به روز کند. در طی مسیر ، توابعی به نام lifecycle hooks نیز فراخوانی می شوند و به کاربران این امکان را می دهد تا در مراحل خاص کد مخصوص خود را اضافه کنند.

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

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

Hook های دیگری نیز وجود دارد که در مراحل مختلف چرخه حیات مانند mounted (نصب و سوار شدن) ، updated ( به روزرسانی) و destroyed (از بین رفتن) فراخوانی می شوند.

از arrow functions در property و callback همانند زیر استفاده نکنید
created: () => console.log(this.a)
vm.$watch('a', newValue => this.myMethod())
باعث خطاهایی نظیر زیر می شود:
Uncaught TypeError: Cannot read property of undefined
Uncaught TypeError: this.myMethod is not a function


دیاگرام چرخه سیستم (Lifecycle Diagram)

چرخه سیستم را بصورت دیاگرام در زیر نمایش داده شده است :

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


منابع مورد مطالعه جهت جمع آوری این مطلب:
https://vuejs.org/v2/guide/instance.html


نظرات