在Vue 3中,生命周期钩子函数可以在组件的不同生命周期阶段执行自定义逻辑,本文介绍Vue 3中常用的生命周期钩子函数及其语法。
1. beforeCreate
- 在实例初始化之后,数据观测和事件配置之前被调用。
无法访问到 this 上的数据和方法
。
export default {
beforeCreate() {
console.log('beforeCreate hook called');
}
};
2. created
- 在实例创建完成后被调用。
- 可以访问 this 上的数据,但无法访问DOM。
export default {
created() {
console.log('created hook called');
}
};
3. beforeMount
- 在挂载开始之前被调用。
- 可以访问到虚拟DOM和 this 上的数据。
export default {
beforeMount() {
console.log('beforeMount hook called');
}
};
4. mounted
- 在挂载完成后被调用。
- 可以访问到DOM元素和 this 上的数据。
export default {
mounted() {
console.log('mounted hook called');
}
};
5. beforeUpdate
- 在数据更新时调用,但在虚拟DOM重新渲染之前。
- 可以访问到更新前的数据和 this 上的数据。
export default {
beforeUpdate() {
console.log('beforeUpdate hook called');
}
};
6. updated
- 在数据更新导致虚拟DOM重新渲染和打补丁之后调用。
- 可以访问到更新后的数据和 this 上的数据。
export default {
updated() {
console.log('updated hook called');
}
};
7. beforeUnmount
- 在实例销毁之前调用。
- 可以执行一些清理操作,如清除定时器等。
export default {
beforeUnmount() {
console.log('beforeUnmount hook called');
}
};
8. unmounted
- 在实例被
销毁后
调用。 - 可以进行一些最终的清理工作。
export default {
unmounted() {
console.log('unmounted hook called');
}
};
通过使用这些生命周期钩子函数,可以在不同的阶段添加自定义逻辑,以便在组件的生命周期中执行特定的操作。