当前位置：首页 > news >正文

Vue3.0生命周期钩子（包含：Vue 2.0 和 Vue 3.0）

news 2025/7/3 16:16:55

1、Vue 2.0 生命周期钩子

每个应用程序实例在创建时都有一系列的初始化步骤。例如，创建数据绑定、编译模板、将实例挂载到 DOM 并在数据变化时触发 DOM 更新、销毁实例等。在这个过程中会运行一些叫做生命周期钩子的函数，通过这些钩子函数可以定义业务逻辑。应用程序实例中几个主要的生命周期钩子函数的说明如下：

钩子函数	说明
beforeCreate()	在实例初始化之后且数据观测和事件/监听器配置之前调用。
created()	在实例创建之后进行调用，此时尚未开始 DOM 编译。在需要初始化处理一些数据时会比较有用。
beforeMount()	在挂载开始之前进行调用，此时 DOM 还无法操作。
mounted()	在 DOM 文档渲染完毕之后进行调用。相当于 JavaScript 中的 windos.onload() 方法。
beforeUpdate()	在数据更新时进行调用，适合在更新之前访问现在的 DOM，如手动移除已添加的事件监听器。
updated()	在数据更新导致的虚拟 DOM 被重新渲染时进行调用。
beforeDestroy()	在销毁实例之前进行调用，此时实例仍然有效。此时可以解绑一些使用 addEventListener 监听的事件等。
destroyed()	在实例被销毁之后进行调用。

【实例】使用生命周期钩子，了解 Vue.js 内部的运行机制。

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Vue生命周期钩子</title>
</head><body><div id="app"><p>{{text}}</p></div>
</body><!-- 引入 Vue 框架 -->
<script src="../js/vue.global.js"></script><script type="text/javascript">//创建应用程序实例const vueApp = Vue.createApp({//返回数据对象data() {return {text: "千里之行，始于足下"}},//生命周期钩子beforeCreate: function () {console.log("beforCreate");},created: function () {console.log("created");},beforeMount: function () {console.log("beforeMount");},mounted: function () {console.log("mounted");},beforeUpdate: function () {console.log("beforeUpdate");},updated: function () {console.log("updated");}//转载应用程序实例的根组件}).mount("#app");//使用定时器函数，2秒后修改内容setTimeout(function () {console.log("修改数据内容：")vueApp.text = "水不在深，有龙则灵";}, 2000);
</script></html>

执行结果：

当2秒后调用 setTimeout() 方法，修改 text 的内容，触发 beforeUpdate() 和 updated() 钩子函数。

2、Vue 3.0 生命周期钩子

Vue3.0 是兼容 Vue2.x 版本的也就是说我们再日常工作中可以在 Vue3 中使用 Vue2.x 的相关语法。

Vue 3.0 带来了许多新特性和改进，其中包括更强大的组合 API。与基于选项的 API 相比，组合 API 中的生命周期钩子函数也发生了变化，将选项中的生命周期钩子函数改成了 onXxx() 函数的形式。

需要注意：

1、beforeCreate() 和 created() 两个钩子函数已被删除了，取而代之的是 setup() 函数。

2、组合 API 中的生命周期钩子函数都是在 setup() 函数内部通过引入相应的函数来使用的。

Vue 3.0 中新增的钩子函数主要包括：

组合 API 钩子函数	说明
setup()	setup() 函数是一个新的组件选项，它是组件内部使用组合 API 的入口。 setup() 函数在组件实例创建之前、初始化 Prop 之后调用。 setup() 函数可以返回一个对象或函数，对象的属性会合并到组件模板渲染的上下文中。
onBeforeMount()	组件挂载到节点上之前执行的函数。
onMounted()	组件挂载完成后执行的函数。
onBeforeUpdate()	组件更新之前执行的函数。
onUpdated()	组件更新完成之后执行的函数。
onBeforeUnmount()	组件卸载之前执行的函数
onUnmounted()	组件卸载完成后执行的函数。
onActivated()	被包含在 <keep-alive> 中的组件，会多出两个生命周期钩子函数，被激活时执行。
onDeactivated()	比如从 A 组件，切换到 B 组件，A 组件消失时执行。
onErrorCaptured()	当捕获一个来自子孙组件的异常时激活钩子函数。

Vue2.0 和 Vue3.0 生命周期钩子函数对比：

【实例】创建一个组件，实现一个计数器功能。

<template><div><h3>{{ blogInfo.name }}</h3><h3>{{ blogInfo.url }}</h3><p>计数结果：{{ count }}</p><button @click="counter">计数器</button></div>
</template><script>
import { ref, reactive, onMounted, onUnmounted } from 'vue';export default {setup() {// 使用 ref 创建响应式的基本类型const count = ref(0);// 使用 reactive 创建响应式的复杂类型const blogInfo = reactive({name: '您好，欢迎访问 pan_junbiao的博客',url: 'https://blog.csdn.net/pan_junbiao'});// 挂载时的操作onMounted(() => {console.log('组件已挂载');});// 卸载时的操作onUnmounted(() => {console.log('组件已卸载');});// 增加计数的方法function counter() {count.value++;}// 返回需要在模板中使用的数据和方法return {blogInfo,count,counter};}
};
</script>

执行结果：

Vue3.0生命周期钩子（包含：Vue 2.0 和 Vue 3.0）

1、Vue 2.0 生命周期钩子

2、Vue 3.0 生命周期钩子

相关文章：

Vue3.0生命周期钩子（包含：Vue 2.0 和 Vue 3.0）

遥感之常用各种指数总结大全

【C++】C++11新增特性

【LeetCode每日一题】——662.二叉树最大宽度

第二十三节、血量更新逻辑的实现

Spring Authorization Server 认证服务器搭建

秋招突击——8/15——知识补充——垃圾回收机制

【iOS】UITableViewCell的重用问题解决方法

开发一个微信小程序商城需要哪些技术栈

望繁信科技荣膺上海市浦东新区博士后创新实践基地称号

Nginx--代理与负载均衡（扩展nginx配置7层协议及4层协议方法、会话保持）

Ubuntu20.4 系统安装后无wifi图标

牛客网SQL进阶135 ：每个6/7级用户活跃情况

SQLite3使用接口写入二进制文件

在复杂的数据库架构中，如何优化 SQL 查询以提高性能和减少资源消耗？

【HarmonyOS】端云一体化初始化项目

LLM之KG：利用大语言模型(LLM)对文本语料提取概念和概念之间的语义关系进而实现自动构建知识图谱

Spring Security 6如何使用？

PyTorch深度学习快速入门教程--学习笔记

SQLALchemy 分组过滤、子查询

零门槛NAS搭建：WinNAS如何让普通电脑秒变私有云？

SkyWalking 10.2.0 SWCK 配置过程

Xshell远程连接Kali（默认 | 私钥）Note版

解决Ubuntu22.04 VMware失败的问题 ubuntu入门之二十八

UE5 学习系列（三）创建和移动物体

376. Wiggle Subsequence

土地利用/土地覆盖遥感解译与基于CLUE模型未来变化情景预测；从基础到高级，涵盖ArcGIS数据处理、ENVI遥感解译与CLUE模型情景模拟等

3-11单元格区域边界定位(End属性)学习笔记

《C++ 模板》

NXP S32K146 T-Box 携手 SD NAND（贴片式TF卡）：驱动汽车智能革新的黄金组合