Vòng đời Component Trong Vuejs | Lê Vũ Nguyên Dạy Học Lập Trình

Có thể bạn quan tâm

VueJS

Giới thiệu về vuejs
Trạng thái
Phương thức
Vòng đời component
Tính toán
Watchers
Component
Props

Vòng đời component trong vuejs nguyen.le , 15 min read Nội dung bài viết

Giới thiệu nội dung bài viết
1. Các vòng đời chính

Giới thiệu nội dung bài viết

Mỗi Vue Component trải qua một loạt các bước khởi tạo khi nó được tạo - Ví dụ: nó cần thiết lập quan sát dữ liệu, biên dịch mẫu, gắn kết cá thể vào DOM và cập nhật DOM khi dữ liệu thay đổi. Ðồng thời, nó cũng chạy các chức năng được gọi là móc vòng đời , cho phép người dùng có cơ hội thêm mã của riêng họ ở các giai đoạn cụ thể

1. Các vòng đời chính

beforeCreate
created
mounted
beforeDestroy

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25

<div id="app"> <div></div> </div> <script> var app = new Vue({ el: "#app", data() { return { message: "HI!", }; }, beforeCreate() { console.log("Before Create", this.message); }, created() { console.log("Created", this.message); }, mounted() { console.log("Mounted", this.message); }, beforeDestroy() { console.log("beforeDestroy", this.message); }, }); </script>

reactjs

beforeCreate Hook. Ðược gọi đồng bộ ngay sau khi phiên bản đã được khởi tạo, trước khi thiết lập quan sát dữ liệu và sự kiện / người theo dõi. Ở đây chúng ta sẽ không thao tác được với trạng thái của ứng dụng vì mọi thứ chỉ là mới khởi tạo, ví dụ bạn sẽ không lấy được giá trị của data trong hook này
created Hook. Ðược gọi đồng bộ sau khi đối tượng Vue được tạo. Ở giai đoạn này, đã hoàn tất xử lý các tùy chọn có nghĩa là các tùy chọn sau đã được thiết lập: data, computed, methods, watch/event callbacks. Tuy nhiên, giai đoạn gắn kết vẫn chưa được bắt đầu và thuộc tính $el (truy cập DOM) sẽ chưa khả dụng.
mounted Hook. Ðược gọi sau khi thể hiện đã được gắn kết (DOM đã được gắn kết.) ở đây bạn có thể truy cập dom thông qua $refs Lưu ý rằng trong mounted không đảm bảo rằng tất cả các thành phần con cũng đã được gắn kết.
beforeDestroy Hook. Ðược gọi ngay trước khi một thể hiện Vue bị hủy. Ở giai đoạn này, Vue component vẫn hoạt động đầy đủ. Hook này được sử dụng khi bạn muốn hành động gì đó khi một thành phần trước khi bị hủy. Khi thoát trang hay sử dụng câu lệnh điều kiện v-if v-else để ẩn đi một component chẳng hạn.