Giới thiệu

Để hiểu rõ hơn về cơ chế hoạt động của VueJS chắc chắn bạn phải biết về lifecycle hooks (vòng đời) của một Vue instance. Lifecycle hooks thể hiện cách mà một component được khởi tạo, được thêm vào DOM, được cập nhật hoặc khi bị hủy.

Dưới đây là sơ đồ về vòng đời của Vue.js Instance Lifecycle:

Creation Hooks

Quá trình khởi tạo diễn ra đầu tiên trên component. Nó cho phép bạn thực hiện các hành động với dữ liệu của component trước khi được thêm vào DOM. Không giống như hooks khác, creation hooks có thể chạy trong quá trình server-side rendering.

Sử dụng creation hooks khi bạn muốn setup cho component, trong khi client đang reder và server đang render. Và bạn không thể truy cập vào DOM.

beforeCreat

Hàm beforeCreat chạy trước khi component được khởi tạo. Trong quá trình này data chưa được reactive(cập nhật khi thay đổi) và events chưa được khởi tạo.

<template>
  <div id="app">
    <ul>
      <li 
      v-for="item in todoList" 
      v-bind:key="item.id"
      >
      {{ item.content }}
      </li>
    </ul>
  </div>
</template>

<script>

export default {
  name: 'App',
  data() {
    return {
      todoList: [
        { id: 1, content: "Go out"},
        { id: 2, content: "Playing Game"},
        { id: 3, content: "Cooking"},
      ]
    }
  },
  beforeCreate() {
    console.log("Ở thời điểm này, events và vòng đời đã được khởi tạo");
    console.log(this.todoList);
  }

}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: left;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

Ở ví dụ này khi ta chưa thể tương tác với dữ liệu todoList và không thực hiện được các thao tác lên DOM.

created

Trong hàm created ta có thể thao tác với data và events có thể kích hoạt được. Templates và Virtual DOM chưa được mounted hoặc rendered. Lúc này ta vẫn chưa truy cập được đến các phần tử DOM.

created() {
    console.log(this.todoList);
}

Ở đây ta đã có thể thao tác với data.

Mounting Hooks

Moungting hooks thường được sử dụng nhiều nhất. Quá trình này xảy ra trước khi component được khởi tạo. Thường sử dụng khi cần truy cập vào DOM.

beforeMount

Hàm beforeMount được gọi sau khi component đã được compile và trước lần render lần đầu tiên.

beforeMount() {
    console.log(this);
    console.log(document.getElementById('app').innerHTML)
  }

Ở đây ta vẫn có thể in ra component hiện tại nhưng khi truy cập vào Vitural DOM sẽ báo null.

mounted

Hàm mounted (khi ta đã nhìn thấy nội dung ở trình duyệt), ta có thể truy cập vào data, template, DOM (thông qua this.$el).

mounted() {
    console.log(this.$el);
    console.log(document.getElementById('app').innerHTML)
}

Updating Hooks

Updating hooks sẽ được gọi bất cứ khi nào reactive data bị thay đổi hoặc khi component re-render.

Sử dụng updating hooks khi ta cần biết khi nào component re-renders, hoặc để debugging. Debug với data reactive thì ta nên dùng computed hoặc watch.

beforeUpdate

Hàm beforeUpdate được gọi ngay sau khi dữ liệu của component bị thay đổi và trước khi component re-render.

Use beforeUpdate if you need to get the new state of any reactive data on your component before it actually gets rendered:

Sử dụng beforeUpdate khi ta cần lấy state mới của bất cứ reactive data của component trước khi dữ liệu được re-render.

<template>
  <div id="app">
    <div>{{ counter }}</div>
  </div>
</template>

<script>

export default {
  name: 'App',
  data() {
    return {
      counter: 1,
    }
  },
  created() {
    setInterval(() => {
      this.counter++;
    }, 1000)
  },
  beforeUpdate() {
    console.log(this.counter);
  }
}
</script>

Ta thấy mỗi lần tăng counter lên thêm 1 thì hàm beforeUpdate sẽ được gọi.

updated

Updated được gọi sau khi data của component thay đổi và DOM re-render.

Sử dụng updated khi ta cần truy cập vào DOM sau khi thay đổi thuộc tính. Dữ liệu ở beforeUpdate và updated là như nhau.

Destruction Hooks

beforeDestroy

beforeDestroy sẽ được gọi trước khi instance bị hủy. Ta có thể quản lý việc xóa tài nguyên, sự kiện không cần thiết sau khi component bị hủy.

destroyed

destroyed sau khi component đã được hủy bỏ hết.

destroyed() {
    console.log(this);
}

VÌ component đã bị hủy nên ta sẽ không in ra gì ở console.

Tổng kết

Ở bài viết này ta đã tìm hiểu về Vue Instance Lifecycle Hooks, các giai đoạn, lifecycle hooks:

• beforeCreate
• created
• beforeMount
• mounted
• beforeDestroy
• destroyed

Tài liệu tham khảo

https://www.digitalocean.com/community/tutorials/vuejs-component-lifecycle