20
1. Vòng đời Vuejs gồm 4 phần chính:
- Khởi tạo Component
- Mounting (Chèn phần tử DOM)
- Updating (Diff & Re-render)
- Desstruction (Hủy bỏ)
2. Khởi tạo Component
- Component là 1 trong những tính năng mạnh mẽ nhất của Vuejs bởi khả
năng tái sử dụng của nó.
- Khi Component chạy, Hook khởi tạo sẽ thiết lập những gì liên quan đến
component trước khi đưa vào DOM. Bạn sẽ không thể truy xuất vào DOM hoặc phần tử đã được hook khởi tạo.
- Có 2 phương thức được sử dụng khi khởi tạo: beforceCreate() và Create(). - beforeCreate()
- Hook beforeCreate sẽ được gọi là đồng bộ ngay sau khi Vue được khởi tạo. Các dữ liệu (data) và sự kiện (event) chưa được thiết lập.
- created()
- lúc này, các dữ liệu (data) và sự kiện (event) đã được thiết lập
3. Mounting (Chèn phần tử DOM)
- Hook Mounting được sử dụng rộng rãi khi làm việc với các component. Nó
cho phép truy xuất vào các component ngay lập tức trước và sau khi nó được hiển thị lần đầu tiên. Và nó cũng được sử dụng khi bạn muốn sửa đổi DOM trước và sau khi render.
- Chú ý: Trong quá trình render từ phía máy chủ, Hook Mounting không nên
được sử dụng để tìm nạp dữ liệu cho các component khi khởi tạo.
- beforeMount()
- Hook này khá ít dùng. Nó sẽ thực hiện sau khi render function hoàn tất và trước khi render chính thức phần tử DOM của lớp Vue.
- mounted()
- Trong hook Mounted, ta đã có thể hoàn toàn truy cập đến các component,
template và DOM.
21 - Hook Updating sẽ được gọi khi có sự thay đổi trong component. Nó sẽ khiến component re-render. Hook này sẽ đưa component của bạn về chu kỳ wath – compute – render.
- beforeUpdate()
- Hook này được gọi ngay khi có sự thay đổi dữ liệu (data) trên component. Và được thực hiện trước khi DOM re-rende. Bạn có thể lấy được dữ liệu mới ở đây.
- updated()
- Hook updated được chạy ngay lập tức sau khi dữ liệu thay đổi trên component. Và dữ liệu truy xuất được là dữ liệu sau khi được thay đổi của component, Cũng là dữ liệu lấy được trên beforeUpdate()
5. Destruction (Hủy bỏ)
- Hook Destruction dùng để thực hiện các hành động khi component của bạn
bị hủy bỏ. Hay nói cách khác là xóa khỏi DOM.
- beforeDestroy()
- Được gọi ngay trước khi hủy bỏ component. Đây là giai đoạn thích hợp
nhất để xóa bỏ dữ liệu (data), các sự kiện (events) để dọn dẹp.
- destroyed()
- Được gọi khi component đã bị xóa bỏ khỏi DOM.