Hi các bạn, nay chúng ta qua bài Sử dụng các Hooks của Vue nhé 😀
Như bài đầu tiên, mình có giới thiệu structure của Vue JS kèm 1 số hooks nhưng ko kể rõ ràng, nay mình xin đi chi tiết hơn một số Hooks mà ta hay xài nhé 😀
Đây là tổng hợp về Vue Life Cycle trong tấm hình này:
Mình sẽ đi chi tiết các Hooks mà chúng ta hay sử dụng nhé 😀
1/ Hooks của Vue – created
Đây là một trong những hook mà ta hay sử dụng nhất, nó sẽ fire khi Vue Instance của bạn đã khỏi tạo xong. Ở hook này thì các data mà ta nhận vào từ prop cũng như data trong Vue instance có thể truy cập và xử lý theo ý chúng ta muốn.
Bình thường nếu component cần ajax lên API lấy data về, mình cũng hay làm ở bước này 😀
// es6 func
created() {
// your action here
}
// es5 func
created: function() {
// your action here
}2/ Hooks của Vue – mounted
Đây là hooks sử dụng nhiều thứ 2, hook này sẽ chạy khi instance của bạn được render ra. Đa số ở mounted ta thường sử dụng để init library, setup gì đó cho component của chúng ta.
// es6 func
mounted() {
// your action here
}
// es5 func
mounted: function() {
// your action here
}3/ Hooks của Vue – beforeUpdate & updated
Khi trong Vue instance của bạn, data mà có thay đổi (bất kì data nào), thì 2 hooks này sẽ chạy tuần tự (như hình trên). Đây cũng là một hooks để ta kiểm soát data 😀
beforeUpdate sẽ chạy khi data vừa thay đổi và trước khi render lại trên DOM.
beforeUpdate() {
}updated sẽ chạy khi đã render xong ở DOM.
updated() {
}4/ Hooks của Vue – beforeDestroy & destroyed
Nếu bạn muốn thực hiện tác vụ gì đó trước khi Vue component của bạn mất đi, ta có thể dùng 2 Hooks này 😀
beforeDestroy sẽ chạy khi component của bạn c.bị xóa, ta vẫn có thể dùng this để access toàn bộ data hay methods thoải mái.
destroyed sẽ chạy khi component đã bị xóa bao gồm cả data, dom, events,…
beforeDestroy: function() {
},
destroyed: function() {
}5/ Kết luận
Với những hooks mà Vue đã đưa ra cho chúng ta, ta có thể xử lý các tác vụ cần thiết vào đúng thời điểm mà ta muốn 😀 Quá tiện lợi fải ko nào? 😀
Tìm hiểu thêm tại VueJS về hooks: https://vuejs.org/v2/api/#Options-Lifecycle-Hooks
VueJS tại Seth Phat: https://sethphat.com/sp-category/lap-trinh/vuejs
Cám ơn các bạn đã quan tâm theo dõi
