vue的生命周期及不同阶段状态可以进行的行为

news/2024/7/10 0:19:04 标签: vue.js, 前端, javascript, vue生命周期, vue


什么是vue的生命周期?

Vue 的实例从创建到销毁的过程 ,就是生命周期 ,也就是从开始创建 ,初始化数据 ,编译模板 ,挂载Dom到渲染DOM ,更新数据再到渲染 ,卸载等一系列的过程 ,我们称这是Vue的生命周期而这些Vue生命周期过程中会伴随着一些函数的自调用。我们称这些函数为钩子函数。


一、vue生命周期>vue生命周期示意图

二、Vue生命周期的作用是什么?

Vue生命周期过程中会伴随着多个事件钩子 ,这些钩子函数让我们在控制整个Vue实例的过程时更容易形成好的逻辑。Vue生命周期总共分8个阶段:创建前/后 ,载入前/后 ,更新前/后 ,销毁前/后。

1.创建阶段

在这个阶段,Vue 实例正在初始化,它会在内存中创建一个实例,并对实例进行初始化设置。在这个阶段,Vue 会调用一些特定的函数来创建实例,这些函数可以在组件中进行重写或自定义。

beforeCreate:
在实例被创建之前调用,此时组件实例的数据和方法都还未初始化。在这个阶段,通常可以进行一些全局变量或实例属性的初始化设置,可以加loading……事件 ,加载实列时触发。

created:
在实例创建之后调用,此时组件实例的数据和方法已经初始化完成,但尚未被挂载到 DOM 上。在这个阶段,通常可以进行一些数据的初始化、异步请求等操作,loading……事件结束等。

2.挂载阶段

在这个阶段,Vue 实例已经完成了初始化设置,并将组件挂载到了 DOM 上,可以进行渲染和交互了。

beforeMount:
在组件挂载到 DOM 之前调用,此时组件已经完成了模板编译,但还未将组件挂载到实际的 DOM 上。

mounted:
在组件挂载到 DOM 后调用,此时组件已经完成了渲染和挂载,可以进行 DOM 操作和交互。在这个阶段,通常可以进行一些依赖于 DOM 的操作,例如获取元素尺寸、绑定事件等,可以使用一些第三方的插件实例写在这个函数内。

3.更新阶段

在这个阶段,组件可能会被重新渲染,或者被销毁。在组件被重新渲染时,也会触发更新阶段的钩子函数。

beforeUpdate:
在组件更新之前调用,此时组件的数据已经发生了改变,但尚未重新渲染。在这个阶段,通常可以进行一些在数据更新前的操作,例如获取更新前的状态、进行异步请求等。

updated:
在组件更新之后调用,此时组件的数据已经重新渲染完成,可以进行 DOM 操作和交互。在这个阶段,通常可以进行一些依赖于 DOM 的操作,例如获取更新后的元素尺寸、重新绑定事件等。
 

4.销毁阶段

在组件被销毁时,会触发销毁阶段的钩子函数。

beforeDestroy:
在组件被销毁之前调用,此时组件实例还没有被销毁,但是已经从父组件中移除了。在这个阶段,通常可以进行一些清理工作,例如取消定时器、清除全局事件等。

destroyed:
在组件被销毁之后调用,此时组件实例已经完全被销毁,无法访问到组件的数据和方法。在这个阶段,通常可以进行一些最后的清理工作。


总结

要想学精vue,生命周期必须知道什么阶段进行了什么操作,我们可以在阶段上进行什么运算。vue八大阶段,可以让我们更好的理解起逻辑进行开发。


http://www.niftyadmin.cn/n/5228967.html

相关文章

glFenceSync

glClientWaitSync是OpenGL中用于等待同步对象状态变化的函数,它可以用于在CPU端等待GPU端的某个操作完成。下面是glClientWaitSync相关的函数以及一个简单的例子: glFenceSync:创建一个同步对象。 GLsync glFenceSync(GLenum condition, GLbi…

使用RobotFramework编写BDD代码

背景 行为驱动开发(Behavior Driven Development)即BDD,是一种敏捷开发方法,通常应用在自动化测试中,或者也可称为行为驱动测试。通过使用自然描述语言确定自动化脚本,通过这种方式,能够大大促…

目标检测——SPPNet算法解读

论文:Spatial Pyramid Pooling in Deep Convolutional Networks for Visual Recognition 作者:Kaiming He, Xiangyu Zhang, Shaoqing Ren, and Jian Sun 链接:https://arxiv.org/abs/1406.4729 目录 1、算法概述2、Deep Networks with Spatia…

java学校高校运动会报名信息管理系统springboot+jsp

课题研究方案: 结合用户的使用需求,本系统采用运用较为广泛的Java语言,springboot框架,HTML语言等关键技术,并在idea开发平台上设计与研发创业学院运动会管理系统。同时,使用MySQL数据库,设计实…

el-table实现动态表头

1.1el-table渲染 <el-tableref"refreshTable":data"tableData"highlight-current-row><el-table-columnfixedwidth"170px"label"测点"align"center"prop"测站名称"/><el-table-column label"…

Pcl内存分配std::bad_alloc问题

T terminate called after throwing an instance of std::bad_alloc’问题 W 出问题的程序段 using PointTpcl::PointXYZ; using PclTpcl::PointCloud<PointT>; PclT::Ptr res; pcl::ConditionalRemoval<PointT> condrem;condrem.setCondition(range_and);cond…

凯旋泥巴佬正式全面亮相,Triumph TF 250-X

之前给大家曝光过凯旋将要进军越野车领域&#xff0c;并且发动机和车架都已经造出来了&#xff0c;还要去参加赛事想要获得比赛的荣誉和名次&#xff0c;就在今日凯旋的一台越野车TF 250-X正式亮相&#xff0c;售价9995美元。 这是凯旋真正意义上的第一台竞赛级越野车&#xff…

学习ComplexHeatmap复杂热图

iMeta | 复杂热图(ComplexHeatmap)可视化文章最新版&#xff0c;画热图就引它_生信宝典的博客-CSDN博客 作者贡献 顾祖光&#xff1a;研究课题的提出和设计&#xff0c; 软件编写&#xff0c;可视化&#xff0c;数据分析&#xff0c;论文编写&#xff0c;修订和审阅。 代码和…