Vue 3 生命周期函数详解
Vue 3 生命周期函数详解
引言
Vue.js 是一个渐进式的 JavaScript 框架，用于构建用户界面。Vue 3 在性能、API 设计和开发者体验方面进行了重大改进。理解 Vue 3 的生命周期函数（Lifecycle Hooks）对于开发高效的 Vue 应用至关重要。本文将详细介绍 Vue 3 的生命周期钩子、每个阶段的作用及其代码示例，帮助读者更好地掌握这一重要概念。
1. Vue 3 生命周期概述
Vue 实例从创建到销毁经历了一系列的阶段，这些阶段被称为生命周期。在每个阶段，Vue 提供了相应的钩子函数（Lifecycle Hooks），允许开发者在特定的时间点执行自定义逻辑。
以下是 Vue 3 的生命周期图：
(new) --> beforeCreate() --> created() --> beforeMount() --> mounted()
| |
v v
(setup phase) (render DOM)
| |
v v
updated() beforeUpdate()
| |
v v
unmounted() beforeUnmount()Vue 3 引入了 Composition API 和 setup 函数，使得组件逻辑更加模块化和可复用。此外，部分生命周期钩子名称有所变化，以更清晰地表达其含义。
2. 常见的生命周期钩子
a. beforeCreate（已废弃）
- 描述：实例刚刚被创建，数据观测（data observer）、属性和方法的运算还未开始，
el和data属性都未初始化。 - 注意：在 Vue 3 中，
beforeCreate已经被废弃，因为setup函数提供了更好的初始化机制。
b. created（已废弃）
- 描述：实例已完成数据观测，属性和方法的运算，
data已经初始化，但还没有挂载到 DOM 上。 - 注意：在 Vue 3 中，
created已经被废弃，推荐使用setup函数来替代。
c. setup
- 描述：这是 Vue 3 新引入的钩子，它在组件实例创建之前调用，允许我们在组件实例创建之前进行复杂的初始化操作。
- 使用场景：适合进行异步数据获取、状态管理、逻辑封装等。
示例代码：
import { defineComponent, ref, onMounted } from 'vue';
export default defineComponent({
setup() {
const message = ref('Hello Vue 3!');
onMounted(() => {
console.log('Component is mounted:', message.value);
});
return {
message
};
}
});d. onBeforeMount
- 描述：在挂载开始之前被调用，相关的
el和template已经编译为虚拟 DOM，但尚未渲染到页面上。 - 使用场景：可以在渲染之前修改数据或虚拟 DOM。
e. onMounted
- 描述：实例已经挂载到真实的 DOM 上，此时可以访问到 DOM 元素。
- 使用场景：适合初始化第三方库、绑定事件监听器等需要操作真实 DOM 的场景。
示例代码：
import { defineComponent, onMounted } from 'vue';
export default defineComponent({
setup() {
onMounted(() => {
console.log('Component is mounted');
// 初始化第三方库，如 jQuery 插件
});
return {};
}
});f. onBeforeUpdate
- 描述：数据更新时调用，在此期间你可以访问旧的 DOM 状态。
- 使用场景：适合在数据更新前进行一些处理，比如取消不必要的网络请求。
g. onUpdated
- 描述：由于数据更改导致的视图更新完成后调用。注意，这时不应该在此钩子中进一步更改状态，否则会导致递归调用。
- 使用场景：适合在视图更新后执行的操作，例如操作新增的 DOM 元素。
示例代码：
import { defineComponent, ref, onUpdated } from 'vue';
export default defineComponent({
setup() {
const message = ref('Hello Vue 3!');
const changeMessage = () => {
message.value = 'Updated Message';
};
onUpdated(() => {
console.log('Component is updated:', message.value);
});
return {
message,
changeMessage
};
}
});h. onBeforeUnmount
- 描述：实例即将被卸载之前调用。在这一步，实例仍然是完全可用的。
- 使用场景：适合清理定时器、解绑事件监听器等资源释放操作。
i. onUnmounted
- 描述：实例已经被卸载。此时所有的指令都被解绑，所有的事件监听器被移除，所有的子实例也都被销毁。
- 使用场景：确保所有资源都被正确释放，避免内存泄漏。
示例代码：
import { defineComponent, ref, onBeforeUnmount, onUnmounted } from 'vue';
export default defineComponent({
setup() {
const timer = setInterval(() => {
console.log('Timer running...');
}, 1000);
onBeforeUnmount(() => {
clearInterval(timer);
console.log('Timer cleared before unmount.');
});
onUnmounted(() => {
console.log('Component has been unmounted.');
});
return {};
}
});3. Composition API 与 Options API 对比
Vue 3 引入了 Composition API，它提供了一种更灵活的方式来组织和重用逻辑。相比传统的 Options API，Composition API 更加模块化，特别适用于复杂逻辑的拆分和组合。
Options API 示例：
export default {
data() {
return {
message: 'Hello Vue 3!'
};
},
created() {
console.log('Component created');
},
mounted() {
console.log('Component mounted');
}
};Composition API 示例：
import { defineComponent, ref, onMounted } from 'vue';
export default defineComponent({
setup() {
const message = ref('Hello Vue 3!');
onMounted(() => {
console.log('Component is mounted:', message.value);
});
return {
message
};
}
});4. 实际应用案例
假设我们正在开发一个简单的计数器组件，它需要在页面加载时从服务器获取初始计数值，并在每次点击按钮时更新计数。
示例代码：
{{ count }}