###
Vue 3.0 生命周期钩子详解
Vue 3 继承并改进了
Vue 2 的
生命周期机制，在保持原有功能的基础上，通过 Composition API 提供了一种更灵活的方式来管理组件的
生命周期逻辑。以下是详细的
生命周期钩子说明以及其用法。
#### 初始化阶段
在初始化阶段，`beforeCreate` 钩子已经被 `setup()` 方法取代[^1]。
- **`setup()`**: 这是一个新的入口函数，它会在组件实例被创建之前调用。所有的响应式数据和方法都可以在这个函数中定义，并返回给模板使用。
```
javascript
import { reactive } from &#
39;
vue&#
39;;
export default {
setup() {
const state = reactive({ count:
0 });
console
.log(&#
39;组件初始化&#
39;);
return { state };
}
};
```
---
#### 挂载阶段
挂载阶段涉及两个重要的钩子：`beforeMount` 和 `mounted`。
- **`onBeforeMount`**: 在组件挂载到 DOM 前触发。
- **`onMounted`**: 在组件成功挂载到 DOM 后触发。
```
javascript
import { onBeforeMount, onMounted } from &#
39;
vue&#
39;;
export default {
setup() {
onBeforeMount(() => {
console
.log(&#
39;组件即将挂载&#
39;);
});
onMounted(() => {
console
.log(&#
39;组件已经挂载&#
39;);
});
return {};
}
};
```
---
#### 更新阶段
更新阶段包含两个钩子：`beforeUpdate` 和 `updated`。
- **`onBeforeUpdate`**: 当组件的数据发生变化但尚未重新渲染时触发。
- **`onUpdated`**: 当组件完成重新渲染后触发。
```
javascript
import { onBeforeUpdate, onUpdated, ref } from &#
39;
vue&#
39;;
export default {
setup() {
const message = ref(&#
39;Hello&#
39;);
onBeforeUpdate(() => {
console
.log(&#
39;组件即将更新&#
39;);
});
onUpdated(() => {
console
.log(&#
39;组件已经更新&#
39;);
});
function updateMessage() {
message
.value += &#
39;!&#
39;;
}
return { message, updateMessage };
},
template: `<div>{{ message }}</div><button @click="updateMessage">更新</button>`
};
```
---
#### 卸载阶段
卸载阶段有两个钩子：`beforeUnmount` 和 `unmounted`。
- **`onBeforeUnmount`**: 在组件销毁前触发，可以用来清理定时器或其他资源。
- **`onUnmounted`**: 在组件完全销毁后触发。
```
javascript
import { onBeforeUnmount, onUnmounted } from &#
39;
vue&#
39;;
export default {
setup() {
let timerId;
onBeforeUnmount(() => {
console
.log(&#
39;组件即将卸载&#
39;);
clearInterval(timerId);
});
onUnmounted(() => {
console
.log(&#
39;组件已经卸载&#
39;);
});
timerId = setInterval(() => {
console
.log(&#
39;计时器运行中
...&#
39;);
}, 1
000);
return {};
}
};
```
---
#### 特殊钩子
除了标准的
生命周期钩子外，还有一些特殊的场景专用钩子：
- **`activated`** 和 **`deactivated`**: 用于处理 `<keep-alive>` 缓存组件的状态切换。
- **`errorCaptured`**: 用于捕获来自后代组件的错误事件。
```
javascript
import { onErrorCaptured } from &#
39;
vue&#
39;;
export default {
setup() {
onErrorCaptured((err) => {
console
.error(&#
39;捕获到错误:&#
39;, err);
return true; // 返回true表示继续传播错误
});
return {};
}
};
```
---
### Options API 对应关系
对于熟悉
Vue 2 的开发者来说，可以直接沿用传统的 Options API 定义
生命周期钩子[^
3]。例如：
```
javascript
export default {
beforeMount() {
console
.log(&#
39;Options API - 组件即将挂载&#
39;);
},
mounted() {
console
.log(&#
39;Options API - 组件已经挂载&#
39;);
}
};
```
尽管如此，推荐优先使用 Composition API 来实现更加模块化和可维护性的代码结构。
---
这篇文章详细介绍了在Vue应用中如何使用`reactive`进行状态管理，并列举了各种生命周期钩子如`onMounted`、`onUpdated`等的使用场景。
扫一扫
575
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
