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中，单个页面中一个生命函数可以多次使用
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
vue3使用el-radio-group获取表格数据无法选中问题及解决方法
这篇文章主要介绍了vue3使用el-radio-group获取表格数据无法选中问题及解决方法,本文给大家介绍的非常详细,需要的朋友可以参考下2024-05-05
这篇文章主要给大家介绍了关于el-table虚拟滚动的相关资料,文中通过实例代码介绍的非常详细,对大家学习或者使用vue.js具有一定的参考学习价值,需要的朋友可以参考下2022-12-12
这篇文章主要介绍了vue中this.$createElement方法的使用，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-07-07
这篇文章主要介绍了解决vuecli3中img src 的引入问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-08-08
我在做一个附件删除功能的时候发现,明明打印出来附件已经没有数据了但是页面就是不刷新, this.$set()不生效,所以本文小编给大家介绍了vue中this.$set()不更新的解决方法,需要的朋友可以参考下2023-11-11
ref对象可以通过.value属性进行修改，修改后的值也是响应式的，并且修改后会触发相关的副作用，这篇文章主要介绍了vue3中的ref(),需要的朋友可以参考下2023-05-05
这篇文章主要介绍了Vue封装数字框组件实现流程，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习吧2023-04-04
本文主要介绍了Vue3中使用钩子函数来修改路由中的meta属性值的方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧2024-11-11
这篇文章主要介绍了vue中标签自定义属性的使用及说明，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-05-05
vue 基于abstract 路由模式 实现页面内嵌的示例代码
这篇文章主要介绍了vue 基于abstract 路由模式 实现页面内嵌的示例代码，帮助大家更好的理解和使用vue框架，感兴趣的朋友可以了解下2020-12-12
最新评论