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.mfbz.cn/a/196693.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

羽隔已就之图像处理之BP神经网络入门

小y最近非常忙,这一年来,活很多,一直在加班、出差,也没好好休息过。最近在武汉出差一个多月了,项目逐渐完结,有点闲时间了,回首望,这一年设定的很多目标都没完成。 还记得&#xff0…

【攻防世界-misc】Encode

1.下载解压文件,打开这个内容有些疑似ROT13加密,利用在线工具解密:ROT13解码计算器 - 计算专家 得到了解密后的值 得到解码结果后,看到是由数字和字母组成,再根据题目描述为套娃,猜测为base编码&#xff08…

处理器及微控制器:XCZU15EG-2FFVC900I 可编程单元

XCZU15EG-2FFVC900I参数: Zynq UltraScale™ MPSoC 系列基于 Xilinx UltraScale™ MPSoC 架构。该 Zynq UltraScale™ MPSoC 器件集成了功能丰富的 64 位四核或双核 Arm Cortex-A53 和双核 Arm Cortex-R5F 处理系统(基于 Xilinx UltraScale™ MPSoC 架…

Vue3挂载完毕后,隐藏dom再重新加载组件的方法

组件原本是在PC端使用的,现在需要把组件再封装一次,供app调用,但是在app上会显示tag栏,有占位影响空间,所以需求去掉头部tag,只显示下方组件。 实现方法,以前是直接引用的组件,现在改…

一天之内“三个离职群都满了”;飞行出租车的时代就此开启?丨 RTE 开发者日报 Vol.94

开发者朋友们大家好: 这里是 「RTE 开发者日报」 ,每天和大家一起看新闻、聊八卦。我们的社区编辑团队会整理分享 RTE (Real Time Engagement) 领域内「有话题的 新闻 」、「有态度的 观点 」、「有意思的 数据 」、「有思考的 文…

java学习part20内部类

116-面向对象(高级)-类的成员之五:内部类_哔哩哔哩_bilibili 1.内部类

在微服务架构中的数据一致性

当从传统的单体应用架构转移到微服务架构时,特别是涉及数据一致性时,数据一致性是微服务架构中最困难的部分。传统的单体应用中,一个共享的关系型数据库负责处理数据一致性。在微服务架构中,如果使用“每个服务一个数据库”的模式…

Java零基础——SpringBoot篇

SSM Springboot 分布式微服务 1.Spring的发展 回顾:Spring是一个开源框架,2003年兴起的一个轻量级的Java 开发框架,作者:Rod Johnson。Spring是为了解决企业级应用开发的复杂性而创建的,简化开发。 1.1 Spring1.x时…

HarmonyOS 数据持久化 Preferences 如何在页面中对数据进行读写

背景介绍 最近在了解并跟着官方文档尝试做一个鸿蒙app 小demo的过程中对在app中保存数据遇到些问题 特此记录下来 这里的数据持久化以 Preferences为例子展开 废话不多说 这里直接上节目(官方提供的文档示例:) 以Stage模型为例 1.明确preferences的类型 import data_prefer…

四川劳动保障杂志社四川劳动保障编辑部四川劳动保障杂志2023年第10期目录

主题报道 四川抢抓“金九银十”招聘季多措并举稳就业促就业 举措频“上新” 金秋送岗忙 张玉芳; 2-5 法眼《四川劳动保障》投稿:cnqikantg126.com 筑牢长期护理保险基金安全防线 李科仲;赖晓薇; 6-7 调研 提升职业技能培训工作的举措 寇爵; 8-9 城乡…

虚拟机虚拟化原理

目录 什么是虚拟化广义虚拟化狭义虚拟化 虚拟化指令集敏感指令集虚拟化指令集的工作模式监视器对敏感指令的处理过程: 虚拟化类型全虚拟化类虚拟化硬件辅助虚拟化 虚拟化架构裸金属架构宿主机模式架构 什么是虚拟化 虚拟化就是通过模仿下层原有的功能模块创造接口来…

电压调整型脉宽调制控制集成电路芯片D7500,工作电压范围7V ~ 40V,输出电流(Max)可达200mA,具有欠压锁定功能

D7500/D7500F SMPS 控制器电路,是一块电压调整型脉宽调制控制集成电路。内部包含5V 基准电压电路、两个误差放大器、触发电路、控制输出电路、脉宽调制比较 器、死区时间比较器及一个 振荡器。该电路可转换频率1kHz至300kHz, 基准电压(Vref)的精确度提…

echarts 水波图

echarts 水波图 安装 npm install echarts --save npm install echarts-liquidfill --save引入 import * as echarts from echarts; import echarts-liquidfill;html <div id"chart1" ref"chart1" class"chart1"></div>css .cha…

DehazeNet: An End-to-End System for Single Image Haze Removal

来源&#xff1a;2016 IEEE journal Cai B, Xu X, Jia K, et al. Dehazenet: An end-to-end system for single image haze removal[J]. IEEE transactions on image processing, 2016, 25(11): 5187-5198. GitHub - caibolun/DehazeNet: DehazeNet: An End-to-End System for …

企业客户服务怎么做?6个有效方法献上!

毋庸置疑&#xff0c;赢得客户的青睐是维系企业经济长青的基础。想要客户满意&#xff0c;得到最佳的客户评价&#xff0c;企业就需要为客户提供超出他们期望的服务。客户服务(Customer Service)是企业成功的关键环节之一&#xff0c;它不仅仅是满足客户需求的过程&#xff0c;…

全新付费进群系统源码 完整版教程

首先准备域名和服务器 安装环境&#xff1a;Nginx1.18 MySQL 5.6 php7.2 安装扩展sg11 伪静态thikphp 后台域名/admin账号admin密码123456 代理域名/daili账号admin密码123456 一、环境配置 二、建站上传源代码解压 上传数据库配置数据库信息 三、登入管理后台 后台域名/ad…

NI自动化测试系统用电必备攻略,电源规划大揭秘

就像使用电脑之前需接通电源一样&#xff0c;自动化测试系统的电源选择也是首当其冲的问题&#xff0c;只不是这个问题更复杂。 比如&#xff0c;应考虑地理位置因素&#xff0c;因为不同国家或地区的公共电网所提供的线路功率有所不同。在电源布局和设备选型方面&#xff0c;有…

大语言模型(LLMs)在 Amazon SageMaker 上的动手实践(一)

本期文章&#xff0c;我们将通过三个动手实验从浅到深地解读和演示大语言模型&#xff08;LLMs&#xff09;&#xff0c;如何结合 Amazon SageMaker 的模型部署、模型编译优化、模型分布式训练等。 实验一&#xff1a;使用 Amazon SageMaker 构建基于开源 GPT-J 模型的对话机器…

14.Tomcat和HTTP协议-[一篇通]

文章目录 1.HTTP 协议1.1HTTP 是什么1.2理解 "应用层协议"1.3理解 HTTP 协议的工作过程1.4HTTP 协议格式1.4.1抓包工具的使用(Fiddler)1.4.2抓包工具的原理1.4.3抓包结果1.4.4协议格式总结 1.5HTTP 请求 (Request)1.5.1认识 URL1.5.1.1URL 基本格式1.5.1.2关于 URL e…

前缀和——238. 除自身以外数组的乘积

文章目录 &#x1f377;1. 题目&#x1f378;2. 算法原理&#x1f365;解法一&#xff1a;暴力求解&#x1f365;解法二&#xff1a;前缀和&#xff08;积&#xff09; &#x1f379;3. 代码实现 &#x1f377;1. 题目 题目链接&#xff1a;238. 除自身以外数组的乘积 - 力扣&a…