vue3生命周期函数使用及说明(挂载、更新、销毁)
更新时间：2026年05月16日 15:55:08 作者：冰凉小脚
文章对比了Vue2和Vue3的生命周期函数,指出Vue3在Vue2的基础上增加了on前缀的生命周期,移除了了创建前后的生命周期钩子,并引入了setup和onUnmount等等新特性,文章强调了在单页面中生命函数可以多次使用,并提供了表格对比帮助理解
vue3生命周期函数(挂载、更新、销毁)
在这之前，相必用户也是用过vue2的经历，所以，在讲解之前先对vue2和vue3的生命周期进行对比：
| Option API | 组合API |
|---|---|
| beforeCreate | -setup |
| created | -setup |
| beforeMount | onBeforeMount |
| mounted | onMounted |
| beforeUpdate | onBeforeUpdate |
| updated | onUpdated |
| beforeDestroy | onBeforeUnmount |
| destroyed | onUnmounted |
| activated | onActivated |
通过表格对比可以看出
1、vue3的生命周期就是在vue2的基础上前面增加（on）
2、vue3去除创建前后生命钩子，取而代之的为setup
3、销毁变了 onUnmounted , onBeforeUnmount
使用举例
<script setup>
import { onBeforeMount, onMounted, onBeforeUpdate, onUpdated, onBeforeUnmount, onUnmounted } from 'vue'
console.log('setup--创建前/后');
onBeforeMount(() => {
console.log('onBeforeMount--挂载前')
})
onMounted(() => {
console.log('onMounted--挂载后')
})
onBeforeUpdate(() => {
console.log('onBeforeUpdate--更新前')
})
onUpdated(() => {
console.log('onUpdated--更新后')
})
onBeforeUnmount(() => {
console.log('onBeforeUnmount--销毁前')
})
onUnmounted(() => {
console.log('onUnmounted--销毁后')
})
</script>注：
在vue3中，单个页面中一个生命函数可以多次使用
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了解决vue打包后vendor.js文件过大问题，本文给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下2019-07-07
解决element-ui el-drawer抽屉el-dialog弹框关闭优化demo
这篇文章主要为大家介绍了解决element-ui el-drawer抽屉el-dialog弹框关闭优化demo，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪<BR>2023-06-06
这篇文章主要给大家介绍了vue3中多个表格怎么同时滚动并且固定表头,文中通过代码示例给大家讲解的非常详细,对大家的学习或工作有一定的帮助,需要的朋友可以参考下2024-02-02
今天小编就为大家分享一篇对vue下点击事件传参和不传参的区别详解，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-09-09
这篇文章主要为大家详细介绍了vue实现前端列表多条件筛选，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-10-10
今天小编就为大家分享一篇vue 强制组件重新渲染(重置)的两种方案，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2019-10-10
这篇文章主要介绍了vue里面如何使用图片的懒加载，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-10-10
从Vuex中取出数组赋值给新的数组,新数组push时报错的解决方法
今天小编就为大家分享一篇从Vuex中取出数组赋值给新的数组,新数组push时报错的解决方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-09-09
这篇文章主要介绍了Vue 前端实现登陆拦截及axios 拦截器的使用,通过这个项目学习如何实现一个前端项目中所需要的 登录及拦截、登出、token失效的拦截及对应 axios 拦截器的使用。需要的朋友可以参考下2019-07-07
这篇文章主要介绍了详解Vue组件实现tips的总结，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-11-11
最新评论