Tài liệu chính thức về vòng đời của Vue có thể xem tại đây
Dưới đây, tôi sẽ sử dụng các ví dụ mã cụ thể để giải thích về vòng đời của Vue. Nếu có bất kỳ sai sót nào, vui lòng cho tôi biết. Với mỗi giai đoạn, tôi sẽ đính kèm mã trước, sau đó đưa ra một số tóm tắt ngắn gọn dựa trên kết quả trả về để giúp bạn hiểu rõ hơn.
Tất cả các đoạn mã trong bài này đều có thể được chạy trên môi trường cục bộ của bạn.
1.beforeCreate và created
HTML:
<div id="app">
<h2>{{ message }}</h2>
</div>
JavaScript:
var vm = new Vue({
el: '#app',
data: {
message: 'Xin chào Vue!'
},
beforeCreate() {
console.log('beforeCreate - Trước khi tạo thành phần');
console.log('Thông điệp:', this.message); // undefined
},
created() {
console.log('created - Sau khi tạo thành phần');
console.log('Thông điệp:', this.message); // Xin chào Vue!
}
});
Tóm tắt:
Kết quả trả về của beforeCreate là undefined, cho thấy nó được thực thi trước khi thành phần được tạo.
created được thực thi sau khi tạo thành phần, tại thời điểm này có thể thao tác với dữ liệu và thực hiện ảnh hưởng từ Vue đến trang. Chúng ta có thể thực hiện các yêu cầu ajax tại thời điểm này.
2.beforeMount và mounted
HTML (giống như trên):
<div id="app">
<h2>{{ message }}</h2>
</div>
JavaScript:
var vm = new Vue({
el: '#app',
data: {
message: 'Xin chào Vue!'
},
beforeMount() {
console.log('beforeMount - Trước khi gắn dữ liệu vào DOM');
console.log('Nội dung DOM:', this.$el.innerHTML); // chưa chứa dữ liệu
},
mounted() {
console.log('mounted - Sau khi gắn dữ liệu vào DOM');
console.log('Nội dung DOM:', this.$el.innerHTML); // đã chứa dữ liệu
}
});
Tóm tắt:
beforeMount: Trước khi tải dữ liệu vào DOM; mounted: Sau khi tải dữ liệu vào DOM, chỉ thực thi một lần.
3.beforeUpdate và updated
HTML:
<div id="app">
<h2>{{ count }}</h2>
<button @click="count++">Tăng giá trị</button>
</div>
JavaScript:
var vm = new Vue({
el: '#app',
data: {
count: 0
},
beforeUpdate() {
console.log('beforeUpdate - Trước khi cập nhật');
console.log('Giá trị hiện tại:', this.count);
console.log('Nội dung DOM:', this.$el.innerHTML); // chưa cập nhật
},
updated() {
console.log('updated - Sau khi cập nhật');
console.log('Giá trị hiện tại:', this.count);
console.log('Nội dung DOM:', this.$el.innerHTML); // đã cập nhật
}
});
Tóm tắt:
beforeUpdate: Truy cập DOM hiện có trước khi cập nhật; updated: Có thể thao tác với DOM sau khi cập nhật. Nếu cần phản ứng với sự thay đổi trạng thái, tốt nhất nên sử dụng thuộc tính tính toán (computed) hoặc watcher.
4.activated và deactivated
HTML (thêm ):
<div id="app">
<keep-alive>
<my-component v-if="showComponent"></my-component>
</keep-alive>
<button @click="showComponent = !showComponent">Hiển thị/Ẩn thành phần</button>
</div>
JavaScript:
Vue.component('my-component', {
template: '<div>Thành phần được giữ lại</div>',
activated() {
console.log('activated - Thành phần được kích hoạt');
},
deactivated() {
console.log('deactivated - Thành phần bị vô hiệu hóa');
}
});
var vm = new Vue({
el: '#app',
data: {
showComponent: true
}
});
Tóm tắt:
activated: Được gọi khi thành phần keep-alive được kích hoạt. deactivated: Được gọi khi thành phần keep-alive bị vô hiệu hóa.
5.beforeDestroy và destroyed
HTML:
<div id="app">
<my-component v-if="isComponentActive"></my-component>
<button @click="isComponentActive = !isComponentActive">Kích hoạt/Vô hiệu hóa thành phần</button>
</div>
JavaScript:
Vue.component('my-component', {
template: '<div>Thành phần sẽ bị hủy</div>',
beforeDestroy() {
console.log('beforeDestroy - Trước khi hủy thành phần');
// Thành phần vẫn hoàn toàn có thể sử dụng tại đây
},
destroyed() {
console.log('destroyed - Sau khi hủy thành phần');
// Tất cả sự liên kết sẽ bị gỡ bỏ, trình nghe sự kiện sẽ bị loại bỏ
}
});
var vm = new Vue({
el: '#app',
data: {
isComponentActive: true
}
});
Tóm tắt:
beforeDestroy: Được gọi trước khi hủy thực thể. Tại bước này, thực thể vẫn hoàn toàn có thể sử dụng. destroyed: Được gọi sau khi hủy thực thể Vue. Sau khi gọi, tất cả mọi thứ do thực thể Vue chỉ định sẽ bị giải liên kết, tất cả trình nghe sự kiện sẽ bị loại bỏ, và tất cả các thực thể con cũng sẽ bị hủy.
Mã nguồn hoàn chỉnh
HTML:
<!DOCTYPE html>
<html lang="vi">
<head>
<title>Vòng đời Vue</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
</head>
<body>
<div id="app">
<div>
<keep-alive>
<my-text v-if="isExit"></my-text>
</keep-alive>
<button @click="isExit = !isExit">Kích hoạt/Vô hiệu hóa thành phần</button>
</div>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
isExit: true
},
components: {
'my-text': MyText
}
});
</script>
</body>
</html>
JavaScript:
var MyText = {
template: `
<div>
{{text}}
<button @click="text = text + ' thêm'">Thêm vào chuỗi</button>
</div>
`,
data: function() {
return {
text: 'Đây là một ví dụ về vòng đời Vue.'
}
},
beforeCreate() {
// Trước khi tạo thành phần
console.log('beforeCreate');
},
created() {
// Sau khi tạo thành phần
console.log('created');
},
activated() {
console.log('Thành phần được kích hoạt');
},
deactivated() {
console.log('Thành phần bị vô hiệu hóa');
},
beforeMount() {
// Trước khi gắn dữ liệu vào DOM
console.log('beforeMount');
},
mounted() {
// Sau khi gắn dữ liệu vào DOM, chỉ thực thi một lần
console.log('mounted');
},
beforeUpdate() {
// Trước khi cập nhật
console.log('beforeUpdate');
},
updated() {
// Sau khi cập nhật
console.log('updated');
},
beforeDestroy() {
console.log('beforeDestroy');
},
destroyed() {
console.log('destroyed');
}
};