Khám Phá Vòng Đời Instance Trong Vue.js
Trong chuỗi bài viết này, chúng ta sẽ tìm hiểu về các khái niệm quan trọng mà mỗi lập trình viên Vue.js cần nắm vững, đặc biệt là vòng đời của một instance. Bài viết sẽ giúp cho những người mới bắt đầu không cảm thấy bỡ ngỡ khi tham gia một dự án sử dụng Vue.js lần đầu. Chúng ta sẽ cùng xem xét cả hai cách viết: Options API (Vue.js 2.x và 3.x) và Composition API (Vue.js 3.x) liên quan đến việc sử dụng các lifecycle hooks.
1. Đặt vấn đề
Khi phát triển ứng dụng web, việc quản lý vòng đời (lifecycle) của một instance từ khi được tạo ra đến khi bị hủy là vô cùng quan trọng. Hiểu và quản lý đúng cách trạng thái và hành vi của các instance là một kỹ năng cần thiết trong lập trình.
Vue.js, với tư cách là một framework JavaScript phát triển giao diện người dùng, cung cấp một cơ chế mạnh mẽ cho phép các lập trình viên can thiệp vào vòng đời của các instance thông qua các lifecycle hooks. Trong bài viết này, chúng ta sẽ khám phá các hooks và tác dụng của chúng trong dự án Vue.js.
2. Các khái niệm cơ bản
- Lifecycle: Mỗi component instance thực hiện một chuỗi các bước như tạo, cập nhật và hủy bỏ. Một vòng đời đầy đủ của instance đó chính là lifecycle.
- Hook: Khái niệm trong lập trình cho phép bạn can thiệp vào chương trình mà không cần thay đổi mã nguồn gốc, giúp mở rộng hoặc tùy chỉnh hệ thống.
- Lifecycle hooks: Là dạng hook đặc biệt giúp can thiệp vào những giai đoạn quan trọng trong vòng đời của component trong Vue.js.
3. Các Lifecycle Hooks trong Vue.js
Dưới đây là các lifecycle hooks cơ bản trong Vue.js:
beforeCreate hook
Hook này được gọi ngay khi instance được tạo ra. Không thể truy cập vào data() và methods trong hook này, đây là nơi để thực hiện các cấu hình ban đầu.
javascript
<script>
export default {
data() {
return {
message: 'Hello world',
}
},
beforeCreate() {
console.log('Before create');
this.message = 'Welcome my web';
}
}
</script>created hook
Hook được gọi sau khi các biến reactive và computed properties đã sẵn sàng. Đây là thời điểm lý tưởng để thực hiện các cuộc gọi API và khởi tạo dữ liệu.
javascript
<script>
export default {
data() {
return { books: [] };
},
async created() {
console.log('Created');
const response = await fetch('http://localhost:3000/books');
this.books = await response.json();
}
}
</script>beforeMount hook
Hook này được gọi trước khi component được gắn vào DOM, cho phép thực hiện các công việc chuẩn bị như gọi API hoặc khởi tạo thư viện.
javascript
<script>
import { ref, onBeforeMount } from 'vue';
export default {
setup() {
const books = ref([]);
const fetchBooks = async () => {
const response = await fetch('http://localhost:3000/books');
books.value = await response.json();
};
onBeforeMount(fetchBooks);
return { books };
},
}
</script>mounted hook
Được gọi sau khi nội dung HTML đã được render và gắn vào DOM. Tại đây có thể thực hiện các thao tác liên quan đến DOM.
javascript
<script setup>
import { onMounted } from 'vue';
onMounted(() => {
console.log('Component mounted');
});
</script>beforeUpdate hook
Được gọi trước khi component được render lại. Đây là thời điểm lý tưởng để chuẩn bị trước khi có sự thay đổi dữ liệu.
javascript
<script setup>
import { ref, onBeforeUpdate } from 'vue';
const message = ref('Hello');
onBeforeUpdate(() => {
console.log('Message is about to be updated');
});
</script>updated hook
Được gọi sau khi component đã hoàn thành việc render lại. Có thể sử dụng để xử lý sau khi dữ liệu đã được cập nhật.
beforeUnmount hook
Gọi ngay trước khi component bị xóa khỏi DOM. Rất quan trọng để dọn dẹp bộ nhớ và giải phóng tài nguyên.
javascript
<script setup>
import { onBeforeUnmount } from 'vue';
onBeforeUnmount(() => {
console.log('Component is about to be unmounted');
});
</script>unmounted hook
Gọi sau khi component đã bị unmount. Chỉ có thể thực hiện các công việc liên quan đến dọn dẹp, không can thiệp vào DOM ở đây.
4. Tổng kết
Bài viết đã trình bày tổng quan về vòng đời của instance trong Vue.js cùng với các lifecycle hooks. Những hook này cho phép lập trình viên quản lý các tác vụ quan trọng tại các thời điểm khác nhau trong vòng đời của component, bao gồm việc chuẩn bị dữ liệu, cập nhật DOM và xử lý khi component bị hủy. Để tìm hiểu thêm, bạn có thể tham khảo tài liệu chính thức của Vue.js tại đây.
source: viblo
