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


什么是vue的生命周期?

Vue 的实例从创建到销毁的过程 ,就是生命周期 ,也就是从开始创建 ,初始化数据 ,编译模板 ,挂载Dom到渲染DOM ,更新数据再到渲染 ,卸载等一系列的过程 ,我们称这是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.hqwc.cn/news/218826.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

iOS强引用引起的内存泄漏

项目中遇到一个问题: 1.在A页面的ViewDidLoad 方法里写了一个接收通知的方法,如下图: 然后在B页面发送通知 (注:下图的NOTI 是 [NSNotificationCenter defaultCenter] 的宏, 考虑一下可能有小白看这篇文章…

(附源码)SSM环卫人员管理平台 计算机毕设36412

目 录 摘要 1 绪论 1.1背景及意义 1.2国内外研究概况 1.3研究内容 1.4 ssm框架介绍 1.5论文结构与章节安排 2 环卫人员管理平台系统分析 2.1 可行性分析 2.2 系统流程分析 2.2.1数据增加流程 2.2.2数据修改流程 2.2.3数据删除流程 2.3 系统功能分析 2.3.1 功能性…

抖音小店开店指南:流程、准备和营销策略一站解析

抖音小店已成为一个热门的社交电商平台,为商家提供了一个快速、方便、低成本的开店通道。下面四川不若与众将介绍抖音小店开店的流程和需要准备的工作,帮助商家顺利开启自己的电商之路。 一、开店准备工作: 1. 产品准备:确定出售…

移动机器人路径规划(七)--- 基于MDP的路径规划MDP-Based Planning

目录 1 什么是MDP-Based Planning 2 worst-case analysis for nondeterministic model 3 Expected Cost Planning 4 Real Time Dynamic Programming(RTDP) 1 什么是MDP-Based Planning 之前我们从起点到终点存在很多可执行路径,我们可以…

c语言练习12周(6~10)

以下程序调用递归函数fun实现求n!,请补充代码。 题干以下程序调用递归函数fun实现求n!,请补充代码。 int fun(int n) { int c; /****************/ /****************/ else cn*fun(n-1); …

【部署运维】docker:入门到进阶

0 前言 部署运维博客系列一共有三篇: 拥抱开源,将工作中的经验分享出来,尽量避免新手踩坑。 【部署运维】docker:入门到进阶 【部署运维】kubernetes:容器集群管理掌握这些就够了 【部署运维】pythonredisceleryd…

04 _ 系统设计目标(二):系统怎样做到高可用?

这里将探讨高并发系统设计的第二个目标——高可用性。 高可用性(High Availability,HA)是你在系统设计时经常会听到的一个名词,它指的是系统具备较高的无故障运行的能力。 我们在很多开源组件的文档中看到的HA方案就是提升组件可…

ref详解(C#)

本质上来说 ref 的就是把 C/C 指针的那一套又拿回来了,而且还封装成一套自己的玩法。 我想设计者的初心把 ref 的功能限制得死死的,可能也考虑到 C# 是一门面向业务开发的语言,讲究的是做项目快狠准,性能反而不是第一要素&#x…

Python头歌合集(题集附解)

目录 一、Python初识-基本语法 第1关:Hello Python! 第2关:我想看世界 第3关:学好Python 第4关:根据圆的半径计算周长和面积 第5关:货币转换 二、turtle简单绘图 第1关:英寸与厘米转换 第2关&#xff1…

LangChain 10思维链Chain of Thought一步一步的思考 think step by step

LangChain系列文章 LangChain 实现给动物取名字,LangChain 2模块化prompt template并用streamlit生成网站 实现给动物取名字LangChain 3使用Agent访问Wikipedia和llm-math计算狗的平均年龄LangChain 4用向量数据库Faiss存储,读取YouTube的视频文本搜索I…

brat文本标注工具——安装

目录 一、Linux系统安装 1. centOS系统 2. Ubuntu系统 3. macOS系统 4.说明 二、Google Chrome安装 1. 打开命令行,切换到管理者权限 2. 安装依赖 3. 下载Google浏览器的安装包 4. 安装Google Chrome 三、yum更新 四、Apache安装 安装Apache 启动Apac…