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.mzph.cn/news/166672.shtml

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

相关文章

OpenAI研发神秘“Q*”模型:科学家认输,AI赢了人类关键一战

图片来源:视觉中国 作者丨叶蓁 编辑丨康晓 出品丨深网腾讯新闻小满工作室 在山姆奥特曼(Sam Altman)被OpenAI前董事会突然罢免之前,数位研究人员向董事会发送了一封信,警告称他们发现了一种能够威胁到人类的强大人工…

IIS 基线安全加固操作

目录 账号管理、认证授权 ELK-IIS-01-01-01 ELK-IIS-01-01-02 ELK-IIS-01-01-03 ELK-IIS-01-01-04 日志配置 ELK-IIS-02-01-01 ELK-IIS-02-01-02 ​​​​​​​ ELK-IIS-02-01-03 通信协议 ELK-IIS-03-01-01 设备其他安全要求 ELK-IIS-04-01-01 ​​​​​​​ ELK-I…

【DDS】OpenDDS配置与使用

😏★,:.☆( ̄▽ ̄)/$:.★ 😏 这篇文章主要介绍OpenDDS配置与使用。 无专精则不能成,无涉猎则不能通。——梁启超 欢迎来到我的博客,一起学习,共同进步。 喜欢的朋友可以关注一下,下次更…

配电室智慧运维监控系统

配电室智能运维监控系统是一个综合性的管理系统,专门针对配电室的运维工作进行设计。依托电易云-智慧电力物联网,它融合了先进的监测技术、自动化技术、数据分析技术等,对配电室进行全方位、实时的智能化监控和管理,以提升配电室运…

关于 Google AMP 和 SEO

Google 于 2015 年首次推出 AMP,即加速移动页面。借助开源 AMP 框架,网页设计师可以制作快速加载的移动网页。该框架的创建是为了应对使用移动设备访问互联网的个人数量的增加。从那时起,谷歌一直在推动使用 AMP 来增强移动设备上的 SEO 和用…

【漏洞复现】好视通视频会议系统(fastmeeting) toDownload.do接口存在任意文件读取漏洞 附POC

漏洞描述 “好视通”是国内云视频会议知名品牌,拥有多项创新核心技术优势、多方通信服务牌照及行业全面资质 [5] ,专注为政府、公检法司、教育、集团企业等用户提供“云+端+业务全场景”解决方案。用全国产、高清流畅、安全稳定的云视频服务助力各行各业数字化转型。 其视频…

opencv-Meanshift 和 Camshift 算法

MeanShift 和 CamShift 都是用于目标跟踪的算法,基于颜色直方图的方法。它们主要用于在视频序列中追踪运动的对象。 MeanShift(均值漂移): 原理: MeanShift 算法的基本思想是通过不断调整窗口的中心,使得窗口中的样本点的平均值向…

多模态常见任务介绍

视觉问答(VQA, Visual Question Answer) 目标:给定一个图片以及问题,需要理解图片的内容并基于此用自然语言回答问题。 例如,图像中发生什么事,人物穿的衣服是什么颜色,图像中有多…

复亚智能交通无人机:智慧交通解决方案大公开

城市的现代化发展离不开高效的交通管理规划。传统的交通管理系统庞大繁琐,交警在执行任务时存在安全隐患。在这一背景下,复亚智能交通无人机应运而生,成为智慧交通管理中的重要组成部分。交通无人机凭借其高灵活性、低成本、高安全性等特点&a…

儿童在线学习系统 宝宝云幼儿园服务微信小程序的设计与实现

综合运用所学的程序设计基础、数据结构、数据库原理及应用、高级语言程序设计、面向对象程序设计、软件需求分析与建模、软件设计与体系结构、软件测试等课程知识,设计开发一个较实用的应用系统。 通过该设计可以巩固并提高软件工程专业学生的软件需求分析、设计、开…

SpringCloud原理-OpenFeign篇(四、请求原理)

文章目录 前言正文一、书接上回,从代理对象入手二、ReflectiveFeign.FeignInvocationHandler#invoke()三、SynchronousMethodHandler#invoke(...) 的实现原理3.1 invoke(...)源码3.2 executeAndDecode(...) 执行请求并解码 四、如何更换client 的实现 附录附1&#…

【Python】生死簿管理系统,估值5毛

生死簿管理系统 代码 """ 生死簿管理系统 """ import os import timefile_name data.txtdef main():while True:main_menu()choice (int)(input("请选择: "))if choice in [0, 1, 2, 3, 4, 5, 6, 7]:if choice 0:answer input(&…

「树形」样式,数据关联超便捷丨三叠云

树形样式 路径 表单设计 >> 字段属性 功能简介 「表单关联」的数据列表样式支持「树形」样式功能,关联数据选择时通过「树形」的列表方式进行数据选择,提高生产效率。 使用场景: 可以通过树形列表样式展示部门、子部门、成员的树形…

30㎡新中式大横厅|方寸之间,诉说东方写意生活。福州中宅装饰,福州装修

今天要分享的是一个新中式风格的客厅装修,它的开间是4.5米,进深是6.5米。设计中有许多亮点,让我们一起来看看。 1️⃣ 首先,这个客厅采用了双眼皮无主灯吊顶的设计,让整个空间看起来更加高挑宽敞。吊顶的边缘线条简洁明…

Re53:读论文 How Can We Know What Language Models Know?

诸神缄默不语-个人CSDN博文目录 诸神缄默不语的论文阅读笔记和分类 论文名称:How Can We Know What Language Models Know? ArXiv网址:https://arxiv.org/abs/1911.12543 官方GitHub项目(prompt之类的都有):https:…

详解Rust编程中的生命周期

1.摘要 生命周期在Rust编程中是一个重要概念, 它能确保引用像预期的那样一直有效。在Rust语言中, 每一个引用都有其生命周期, 通俗讲就是每个引用在程序执行的过程中都有其自身的作用域, 一旦离开其作用域, 其生命周期也宣告结束, 值不再有效。幸运的是, 在绝大多数时间里, 生…

15 reids哨兵机制

redis主机默认是10s发送一次心跳给从节点。 从节点默认1s去发送心跳给主节点。 1、原理 当主节点出现故障时,由Redis Sentinel自动完成故障发现和转移,并通知应用方,实现高可用性。 从节点的主要两个作用: 主节点的数据备份。…

【2023年APMCM亚太杯C题】完整代码+结果分析+论文框架

2023年APMCM亚太杯C题 完整代码结果分析论文框架第一问问题分析技术文档1 基于AHP的新能源汽车发展影响因素分析1.1 AHP模型的构建1.2 AHP模型的求解 2 基于自适应ARIMA-非线性回归模型的影响因素预测2.1 ARIMA模型的建立2.2 非线性回归模型的建立2.3 自适应混合ARIMA-非线性回…

【数据结构/C++】线性表_顺序表的基本操作

#include <iostream> using namespace std; #define MaxSize 10 // 1. 顺序表 // 静态分配 typedef struct {int data[MaxSize];int length; // 当前长度 } SqList; // 静态分配初始化顺序表 void InitList(SqList &L) {for (int i 0; i < MaxSize; i){L.data[i]…