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配置与使用。 无专精则不能成,无涉猎则不能通。——梁启超 欢迎来到我的博客,一起学习,共同进步。 喜欢的朋友可以关注一下,下次更…

华为云编译构建CodeArts Build常见问答汇总

1.【Build】公有云编译构建是否支持导入外部机器做执行机 答:参考链接:https://support.huaweicloud.com/usermanual-devcloud/devcloud_01_0017.html • 使用代理机功能,需要配备1台4U8G或以上规格、磁盘>80GB的主机。 • 安装代理的…

Ubuntu 启用 root 用户

在启用 root 用户之前,我们先来了解一下, ubuntu 命令的组成。 打开 ubuntu 的终端,现在的命令行是由 topeetubuntu:~$ 这几个字母组成,那么这几个字母都代表 什么意思呢? topeet …

配电室智慧运维监控系统

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

人工智能对当代生活的影响

人工智能(AI)是指通过模拟人类智能的方式,使机器能够执行某些需要智能的任务。随着技术的快速发展和应用的广泛推广,人工智能已经深入到我们的日常生活中,对我们的生活和社会产生了深远的影响。本文将探讨人工智能对当…

Django同时连接多种数据库

我的使用场景需要同时连接达梦数据库和MYSQL数据库,有的功能需要查询达梦,有的功能则需要查询MYSQL。 第一步:在 Django 的 settings.py 文件中,配置多个数据库连接。你可以在 DATABASES 字典中添加多个数据库配置。每个数据库配置…

关于 Google AMP 和 SEO

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

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

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

opencv-Meanshift 和 Camshift 算法

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

介绍正则表达式及其用法

正则表达式(Regular Expression),简称为"正则",是一种用于描述、匹配、搜索文本的方式。正则表达式通常由符号和字符组成,可以用于匹配和搜索特定模式的文本。 以下是一些常用的正则表达式元字符及其用法&am…

多模态常见任务介绍

视觉问答(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️⃣ 首先,这个客厅采用了双眼皮无主灯吊顶的设计,让整个空间看起来更加高挑宽敞。吊顶的边缘线条简洁明…