###
Vue 生命周期各阶段及钩子
函数的实际应用
#### beforeCreate 阶段
`beforeCreate` 是在实例初始化完成之后，但在数据观测 (data observer)
和事件配置之前调用的钩子。此阶段可以用来初始化一些未被
Vue 代理的数据或者设置全局变量。
```javascript
export default {
beforeCreate() {
console.log('Before Create:', this.$el); // 此时尚未挂载到 DOM 上
this.unproxiedData = {}; // 初始化未被
Vue 代理的数据
}
}
```
在此阶段，由于尚未绑定 `data` 或者 `methods`，因此无法访问它们[^2]。
---
#### created 阶段
`created` 钩子会在实例创建完成后立即调用。此时已经完成了响应式系统的初始化工作，可以通过 `this` 访问到所有的属性
和方法。适合用于获取初始数据或进行逻辑处理。
```javascript
export default {
data() {
return { message: 'Hello' };
},
created() {
console.log('Created:', this.message);
fetch('/api/data') // 发起异步请求获取远程数据
.then(response => response.json())
.then(data => this.processData(data));
},
methods: {
processData(data) {
console.log('Processing Data:', data);
}
}
}
```
这个阶段非常适合发起网络请求来加载页面所需的数据。
---
#### beforeMount 阶段
`beforeMount` 在模板编译成虚拟 DOM 并准备挂载到真实 DOM 前触发。此时可以修改虚拟 DOM 结构而不影响真实的 DOM 渲染性能。
```javascript
export default {
template: '<div>{{ title }}</div>',
data() {
return { title: 'Initial Title' };
},
beforeMount() {
this.title = 'Updated Before Mount'; // 修改即将渲染的内容
}
}
```
该阶段通常不涉及复杂操作，主要用于调试或优化虚拟 DOM 的结构[^1]。
---
#### mounted 阶段
当
组件成功挂载到 DOM 后会触发 `mounted` 钩子。这是最常用的
生命周期之一，常用于启动定时器、订阅消息总线或其他需要依赖于已存在的 DOM 节点的任务。
```javascript
export default {
mounted() {
const element = document.querySelector('#app');
console.log('Mounted Element:', element);
setInterval(() => {
console.log('Timer Triggered!');
}, 1000);
}
}
```
注意，在服务端渲染环境中可能不会触发 `mounted`，因为不存在浏览器环境下的 DOM 操作。
---
#### beforeUpdate 阶段
每当数据变化引起视图重新渲染前都会触发 `beforeUpdate`。如果希望在更新发生前后对比某些状态，则可以选择在这里记录旧的状态以便后续比较分析。
```javascript
export default {
data() {
return { count: 0 };
},
beforeUpdate() {
console.log(`Count is about to change from ${this.count}`);
},
methods: {
increment() {
this.count++;
}
}
}
```
利用这一特性可以帮助开发者更好地理解
组件内部的变化流程。
---
#### updated 阶段
一旦视图完成更新就会进入 `updated` 状态。需要注意的是，这里可能会遇到无限循环的风险——即再次更改数据又引发新的更新周期。
```javascript
export default {
data() {
return { name: '' };
},
updated() {
if (!this.name.trim()) {
alert('Name cannot be empty after update.');
}
},
methods: {
setName(newName) {
this.name = newName;
}
}
}
```
谨慎使用本阶段的功能以免造成不必要的副作用。
---
#### beforeDestroy / beforeUnmount 阶段
在
组件销毁之前执行清理工作的最佳时机就是 `beforeDestroy`（
Vue 3 称之为 `beforeUnmount`）。比如清除计时器、解绑自定义事件监听器等资源释放动作都应放于此处。
```javascript
export default {
destroyed() {
clearInterval(this.timerId);
window.removeEventListener('resize', this.handleResize);
},
created() {
this.timerId = setInterval(() => {}, 1000);
window.addEventListener('resize', this.handleResize.bind(this));
}
}
```
确保所有动态分配给外部对象上的回调都能及时解除绑定以防内存泄漏。
---
#### destroyed/unmount 阶段
最后一步便是彻底移除当前实例并停止其活动。任何残留的影响都将消失不见。
```javascript
export default {
unmounted() {
console.log('Component has been fully removed.');
}
}
```
至此整个
生命周期结束。
---
博客介绍了组件生命周期分为创建、更新、销毁三个阶段，其中创建和销毁阶段各执行一次，更新阶段会执行多次，还提到了函数式组件以及在模版中需要临时变量的情况。
扫一扫
1634
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
