Vue3 -- 生命周期函数（钩子）

最新推荐文章于 2024-09-22 13:43:17 发布

爱划水de鲸鱼哥～

最新推荐文章于 2024-09-22 13:43:17 发布

阅读量1.1k

点赞数 2

分类专栏： Vue3 文章标签： vue javascript js

本文链接：https://blog.csdn.net/m0_47901007/article/details/118498206

版权

本文详细介绍了Vue实例的生命周期，包括初始化、挂载、更新和销毁四个阶段的八个生命周期钩子。通过代码演示展示了在不同生命周期中如何操作数据和DOM，以及在页面加载、数据更新和应用销毁时触发的钩子函数。最后，总结了各个关键生命周期函数的作用。

摘要由CSDN通过智能技术生成

Vue生命周期

Vue 实例从开始创建、初始化数据、编译模板、挂载DOM、更新渲染、卸载等一系列的过程，我们称这是 Vue 的生命周期。

Vue 所有功能实现都是围绕生命周期进行；

在不同阶段调用对应的钩子，实现组件数据管理和DOM渲染；

生命周期函数是指在某一时刻自动执行的函数。

在这里插入图片描述

从图中可以看出，Vue的生命周期包括初始化、挂载、更新和销毁四个阶段，八个生命周期。

Vue生命周期函数	描述
beforeCreate()	在实例生成之前，立即执行的函数
created()	在实例生成之后，自动执行的函数
beforeMount()	在组件挂载到页面之前，立即执行的函数
mounted()	在组件挂载到页面之后，自动执行的函数
beforeUpdate()	当数据更新时，立即执行的函数
updated()	当数据更新页面重新渲染后，自动执行的函数
beforeUnmount()	当vue应用销毁时，立即执行的函数
unmounted()	当vue应用销毁时且DOM完全销毁之后，自动执行的函数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name

关注

专栏目录