Cấu trúc của 1 thể hiện Vue (Vue Instance)

Trong bài viết này, mình xin tiếp tục nói về cấu trúc của một thể hiện Vue (Vue Instance).

Cách tạo 1 thể hiện Vue Instance như thế nào?

Tất cả mọi ứng dụng Vue đều được bắt đầu bằng cách khởi tạo mới một thể hiện Vue (Vue Instance):

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

Tuy không được thiết kế chặt chẽ theo mô hình MVVM (MVVM pattern), nhưng cấu trúc của nó được truyền cảm hứng từ chính mô hình này. Theo quy ước, ta thường sử dụng biến vm (ViewModel) để tham chiếu đến thể hiện Vue (Vue Instance) của chúng ta.

Khi ta tạo một thể hiện, ta thường cần phải truyền vào các tuỳ chọn để có được một thể hiện phù hợp với mong muốn của chúng ta. Một ứng dụng Vue thường được cấu trúc bởi một thể hiện gốc (root Vue instance) được khởi tạo bằng new Vue và các thành phần có tính tái sử dụng được (reuseable components) tạo nên một cấu trúc câu lồng với nhau.

Root Instance
    └─ ComponentHead
       └─ ComponentLogo
       └─ ComponentMenu
    └─ ComponentBody
       └─ ComponentItem1
           └─ComponentButton
           └─ ComponentInput
       └─ ComponentItem2
    └─ ComponentFooter
       └─ ComponentCopyRight
       └─ ComponentPartner

Dữ liệu (data) và phương thức (method)

Ta hãy làm rõ chức năng của 2 khái niệm trên thông qua một ví dụ sau:

var dataDemo = { a: 1 }
  
// Ta khởi tạo 1 thể hiện của Vue
var vm = new Vue({
  // ta gán tuỳ chọn data (data option) của đối tượng Vue bằng biến data ta đã tạo ra ở trên
  data: dataDemo
})
  
vm.a === data.a // => true

Khi ta khởi tạo thể hiện Vue, nó sẽ thêm tất cả các thuộc tính được tìm thấy trong đối tượng data vào hệ thống phản ứng của nó (Vue’s reactivity system). Một khi giá trị của một trong các thuộc tính này thay đổi thì view sẽ phản ứng và cập nhập lại theo giá trị mới thay đổi của chúng ta.

vm.a = 4
data.a // => 4
  
data.a = 20
vm.a // => 20

Khi tập data thay đổi, view sẽ thực hiện việc re-render với giá trị mới thay đổi. Tuy nhiên, chỉ có các thuộc tính trong có data khi ta thực hiện khởi tạo thể hiện của Vue mới có thể được nạp vào hệ thống phản ứng. Điều này có nghĩa là khi các thuộc tính thêm vào sau thay đổi sẽ không kích hoạt view re-render. Ví dụ:

vm.b = 50

Vì vậy, nếu ta biết rằng ta sẽ cần đến một thuộc tính nào đó trong data tương lai và khi khởi tạo nó không có giá trị hoặc thậm chí không tồn tại. Ta cần phải tạo thuộc tính đó và gán cho nó một giá trị mặc định nào đó.

var vm = new Vue({
  data: {
    content: "",
    error: [],
    status: 0
    list: []
  }
});

Ngoài các thuộc tính về dữ liệu (data), một thể hiện của Vue (Vue instance) còn có một số thuộc tính (properties) và phương thức (method) rất hữu dụng khác. Các thuộc tính và phương thức này có ký tự $ trong tên để phân biệt nó với các thuộc tính và phương thức do người dùng định danh.

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

vm.$el === document.getElementById('root'); // => true

// watch method
vm.$watch('a', function(newValue, oldValue) {
  // handle watch
});

Vòng đời của một thể hiện (Instance Lifecycle Hook)

Mỗi thể hiện Vue sẽ thông qua lần lượt các bước được định sẵn khi được khởi tạo, ví dụ như nạp dữ liệu giám sát (data observation), biên dịch template, gắn thể hiện vào cây DOM và cập nhập lại cây DOM khi dữ liệu thay đổi. Vue cung cấp cho ta các móc (hook) ở một số giai đoạn trong việc khởi tạo để ta có thể chèn thêm các tuỳ chỉnh của mình vào những giai đoạn cụ thể.

Ví dụ:

var vm = new Vue({
  data: {
    a: 1
  },
  created: function () {
    // "this" is vm instance
    console.log('Variable a: ' + this.a);
  },
});

Đoạn code trên ta đã sử dụng created hook để chèn đoạn xử lý của mình vào khi instance được khởi tạo. Ngoài created, ta còn có các hook khác như mounted, updated,…

Lưu ý, ta không nên dùng arrow function để xử lý các hook này vì arrow function không có “this” vì vậy ta không thể truy cập đến các thuộc tính của Vue instance bên trong các Hook này.

var vm = new Vue({
  data: {
    a: 1
  },
  created: () => {
    console.log('Variable a: ' + this.a); 
    // Uncaught TypeError: Cannot read property of undefined
  },
});

Sơ đồ vòng đời

Tổng Kết

Qua bài viết, mình đã giới thiệu với các bạn về một thể hiện Vue, đây là kiến thức khá quan trọng để ta có thể sử dụng Framework Vue một cách hiệu quả nhất sau này. Vì vậy, các bạn hãy xem thật kỹ càng và tham khảo thêm tài liệu của framework mình để ở dưới để nắm thật vững phần kiến thức này nhé. Cảm ơn các bạn.

Bài viết liên quan : VueJS là gì?

Tài liệu tham khảo

https://vuejs.org/v2/guide/instance.html#Lifecycle-Diagram