vue2 生命周期
Vue 2 的生命周期指的是 Vue 实例从创建、挂载到页面、数据更新、销毁的整个过程。在这个过程中，Vue 提供了一系列的钩子函数，允许开发者在特定的时间点插入自己的代码逻辑，从而实现对组件的精确控制。
1. 官方图示
2. 生命周期阶段及钩子函数
⭐️表示常用
2.1 创建阶段
在这个阶段，Vue 实例正在被创建，主要进行数据观测、property 和 method 的计算、watch/event 事件回调的配置等工作。
beforeCreate- 触发时间: 在实例初始化之后，数据观测 (data observer) 和 event/watcher 事件配置之前被调用。
- 使用场景: 此时 data 和 methods 还未初始化，通常在此阶段进行一些与实例创建无关的全局配置或初始化操作，如加载外部库等。
new Vue({
beforeCreate() {
console.log('实例初始化，data 和 methods 未可用');
}
});
created⭐️- 触发时间: 实例已经创建完成之后被调用。在这一步，实例已经完成了数据观测 (data observer)、property 和 method 的计算、watch/event 事件回调的配置等。然而，挂载阶段还没有开始，$el 属性目前不可用。
- **使用场景:**可以在这个阶段进行数据的初始化操作，如发起网络请求获取初始数据。
new Vue({
data() {
return {
userData: null
};
},
created() {
// 模拟异步请求
fetch('https://api.example.com/user')
.then(response => response.json())
.then(data => {
this.userData = data;
});
}
});
2.2 挂载阶段
这个阶段主要涉及到将 Vue 实例挂载到 DOM 上。
beforeMount- 触发时间: 在挂载开始之前被调用，相关的 render 函数首次被调用。此时模板已经编译完成，但还未挂载到页面上。
- 使用场景: 可以在这个阶段对模板进行一些最后的修改或处理。
new Vue({
template: '<div>{
{ message }}</div>',
data() {
return {
message: 'Hello'
};
},
beforeMount() {
console.log('模板编译完成，即将挂载到页面');
}
});
mounted⭐️- 触发时间: el 被新创建的 vm.$el 替换，并挂载到实例上去之后调用该钩子。此时模板已经成功挂载到页面上，可以访问 DOM 元素。
- 使用场景: 可以在这个阶段对模板进行一些最后的修改或处理。
new Vue({
template: '<div id="app">{
{ message }}</div>',
data() {
return {
message: 'Hello'
};
},
mounted() {
const appElement = document.getElementById('app');
console.log('DOM 已挂载:', appElement.textContent);
}
});
2.3 更新阶段
当响应式数据发生变化时，会触发更新阶段。
beforeUpdate- 触发时间: 在数据更新之前被调用，发生在虚拟 DOM 打补丁之前。此时数据已经发生变化，但 DOM 还未更新。
- 使用场景: 可以在这个阶段获取数据更新前的 DOM 状态，进行一些数据备份或其他操作。
new Vue({
data() {
return {
count: 0
};
},
beforeUpdate() {
console.log('数据即将更新，当前 count:', this.count);
},
methods<