Bài 9: Lifecycle Hooks - Vòng đời Của Một Vue Instance - Yêu Lập Trình

Khái niệm về Lifecycle đóng một vai trò vô cùng quan trọng trong việc bạn nắm bắt và sử dụng Vue.js một cách hiệu quả. Trong bài hôm nay chúng ta cùng nhau tìm hiểu sâu hơn về nó nhé.

Nội dung của bài

• 1 Sơ đồ vòng đời
• 2 Các giai đoạn
  • • 2.0.1 Giai đoạn khởi tạo (Creating)
    • 2.0.2 Gắn đối tượng vào DOM (Mounting)
    • 2.0.3 Cập nhật dữ liệu trên DOM (Updating)
    • 2.0.4 Giai đoạn huỷ đối tượng (Destroying)

Sơ đồ vòng đời

Dưới đây là vòng đời của một Vue instance. Nếu bạn đã dõi theo series này của Yêu lập trình thì chắc cũng sẽ nắm được sơ sơ về nó. Trông có vẻ khá phức tạp nhưng mình xin tóm lược nó thành từng giai đoạn như sau:

Creating => Mounting => Updating => Destroying

• Creating: Khởi tạo đối tượng
• Mounting: Gắn đối tượng với DOM
• Updating: Cập nhật đối tượng trên DOM
• Destroying: Huỷ đối tượng

Các giai đoạn

Giai đoạn khởi tạo (Creating)

• beforeCreate: hook chạy mỗi khi khởi tạo một instance. Tại thời điểm này, data, event chưa được thiết lập.
• created: hook được chạy khi data, event đã thiết lập thành công.

Ta cùng xem qua ví dụ sau:

data() { return { msg: "Hi, anonymous. Welcome to Yeulaptrinh.vn!" } }, beforeCreate() { console.log("-------beforeCreate--------") console.log(this.msg) }, created() { console.log("-------Created--------") console.log(this.msg) },

Và kết quả thu được như sau:

Ta thấy: ở giai đoạn beforeCreate, Vue instance chưa được khởi tạo, kết quả ta thấy được là undefined. Ở giai đoạn created, instance đã được tạo ra, và kết quả là msg được hiển thị ra đúng như khởi tạo ban đầu.

Gắn đối tượng vào DOM (Mounting)

beforeMount() { console.log("-------beforeMount--------") console.log(this.$el.textContent) }, mounted() { console.log("-------Mounted--------") console.log(this.$el.textContent) }

• beforeMount: hook sẽ chạy sau khi data, event được thiết lập và trước khi gắn kết vào DOM. Trong hook này chúng ta vẫn chưa – truy cập được phần tử trong DOM.
• mounted: trong giai đoạn này, mounted hook sẽ cho phép chúng ta có thể truy cập vào phẩn tử trong DOM. Tức là khi này, DOM đã được gắn kết.

Ở giai đoạn beforeMount, Vue instance đã tạo ra ở created, tuy nhiên chưa gắn vào DOM, ta chưa thấy DOM element được tạo ra, kết quả là cố gắng truy cập sẽ dẫn ra lỗi DOM element bị undefined. Ở bước Mounted, lúc này quá trình mount (gắn Vue instance vào DOM) hoàn tất, ta có thể truy cập lên DOM element hoàn toàn bình thường.

Cập nhật dữ liệu trên DOM (Updating)

beforeUpdate() { console.log("-------beforeUpdate--------") console.log(this.msg) }, updated() { console.log("-------Updated--------") console.log(this.msg) },

• beforeUpdate hook: Sau khi đối tượng đã được gắn vào DOM, khi dữ liệu thay đổi, và trước khi render, patch lại và hiển thị ra cho người dùng.
• updated hook: Chạy ngay sau khi beforeUpdate . Sử dụng khi bạn cần truy cập DOM sau khi thay đổi thuộc tính. Dữ liệu ở beforeUpdate và updated là như nhau

Sau khi msg thay đổi, dữ liệu ở beforeUpdate và updated là giống nhau, chỉ khác rằng DOM đã được cập nhật ở bước updated chứ beforeUpdate thì không.

Giai đoạn huỷ đối tượng (Destroying)

• beforeDestroy hook: Là giai đoạn trước khi instance bị hủy. Đây là nơi để quản lý tài nguyên xóa tài nguyên, dọn dẹp các component.
• destroyed hook: Thời điểm này, mọi thành phần đã được hủy bỏ hết.

beforeDestroy chúng ta đã quá quen từ những bài trước đúng không nào, nơi chúng ta vẫn thường hay gọi EventBus.off để tránh hiện tượng data leak.

Bài viết đến đây cũng khá dài, hy vọng nó góp phần giúp đỡ các bạn sử dụng và vận dụng nó để tạo và quản lý các instance trong Vue.js. Hẹn gặp lại.