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

news2024/10/7 12:17:29


什么是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.coloradmin.cn/o/1247055.html

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

相关文章

Hologres性能优化指南1:行存,列存,行列共存

在Hologres中支持行存、列存和行列共存三种存储格式&#xff0c;不同的存储格式适用于不同的场景。 在建表时通过设置orientation属性指定表的存储格式&#xff1a; BEGIN; CREATE TABLE <table_name> (...); call set_table_property(<table_name>, orientation,…

RabbitMQ 安装(在docker容器中安装)

为什么要用&#xff1f; RabbitMQ是一个开源的消息代理和队列服务器&#xff0c;主要用于在不同的应用程序之间传递消息。它实现了高级消息队列协议&#xff08;AMQP&#xff09;&#xff0c;并提供了一种异步协作机制&#xff0c;以帮助提高系统的性能和扩展性。 RabbitMQ的作…

这是一个最简单的爱国主义为主题的网页首页

代码&#xff1a; <!DOCTYPE html> <html lang"zh-CN"> <head> <meta charset"UTF-8"> <title>爱国主题网页</title> <style> body { font-family: Arial, sans-serif; …

《opencv实用探索·二》根据RGB的像素排列来理解图像深度、像素深度和位深度

通常对于RGB图像主要分为RGB16&#xff0c;RGB24和RGB32。RGB16从高位到低位的排列为R->G->B&#xff0c;RGB24和RGB32从高位到低位的排列为B->G->R。 RGB16: 16 位为一个存储单元&#xff08;一个像素&#xff09;&#xff0c;来存储一个RGB像素;因为人眼对绿色比…

哦?是吗|兜兜转转,最后还是选择了盖雅排班系统

在之前发布的和「人效案例集」中&#xff0c;我们为大家呈现了很多关于人效提升的理论方法&#xff0c;以及各家企业的人效提升提升实践。 回过头来&#xff0c;我们发现&#xff1a;排班管理渗透于人效九宫格之中&#xff0c;也因此成为很多企业人效提升的一个重要中介&#x…

【MOJO】Modular语言安装和测试

目录 一、Mojo介绍 Linux​ Mac 二、安装Mojo SDK 三、mojo代码测试 3.1、在 REPL 中运行代码​ 3.2、构建并运行 Mojo 源文件​ 运行mojo文件​ 构建可执行二进制文件​ 四、VSCode安装 一、Mojo介绍 在学习Rust语言的过程中无意发现了Modular语言&#xff0c;语言…

C语言——编写程序,判断从键盘输入字符的类型(大写字母、小写字母、数字、其他四类)

#define _CRT_SECURE_NO_WARNINGS 1#include <ctype.h> #include <stdio.h> int main() { char c;printf("请输入一个字符: \n");scanf("%c",&c);if (isupper(c)) {printf("这是一个大写字母\n");} else if (islower(c)) {pr…

基于若依的ruoyi-nbcio流程管理系统修改代码生成的sql菜单id修改成递增id(谨慎修改,大并发分布式有弊端)

更多ruoyi-nbcio功能请看演示系统 gitee源代码地址 前后端代码&#xff1a; https://gitee.com/nbacheng/ruoyi-nbcio 演示地址&#xff1a;RuoYi-Nbcio后台管理系统 1、我看我的原先系统生成的代码id都是很长如下&#xff1a; -- 菜单 SQL insert into sys_menu (menu_id…

​3ds Max插件CG MAGIC图形板块为您提升线条效率!

​通过3ds Max软件进行绘图操作时&#xff0c;大多绊住各位设计师们作图速度的往往都是一些细微的琐事&#xff0c;重复一变一变的调整修改等问题。 今天说到这个绘图线条来回调整解决方法就是3ds Max插件CG MAGIC。 Max插件CG MAGIC作为一款智能化的辅助插件&#xff0c;致力于…

MFC设置单选按钮点击自己可以可选和不可选

mfc是c的一个框架&#xff0c;可谓是经久不衰。最近博主遇到一个问题&#xff0c;就是单选按钮点击自己可以设置可选和不可选&#xff0c;貌似类似复选框一样&#xff0c;但领导分发的任务上要求的是用单选按钮实现复选框这种类似功能&#xff0c;实现效果类似如下图&#xff1…

阿里云Elasticsearch Severless 如何做到成本降低50%

阿里云检索分析服务 Elasticsearch 版云上演进之路 2017年&#xff0c;阿里云与Elastic 开启开源战略合作&#xff0c;正式发布阿里云检索分析服务 Elasticsearch 版 &#xff0c;100%兼容开源Elasticsearch&#xff0c;开箱即用&#xff0c;提供开放兼容的云上检索分析服务。…

MySql使用游标批量更新字段为空的记录

目的&#xff1a;因为工作中需要模拟大批量的测试数据、发现有部分历史数据中的唯一编号的字段内容为空&#xff0c;因此需要按顺序填充上对应的字段内容&#xff0c;经查询mysql使用游标方式能快速实现此需求。 具体操作步骤如下&#xff1a;打开Navicate for MySQL软件、连接…

ARKit增加一个盒子

ARKit增加一个盒子 体验一下ARKit的能力&#xff0c;在室内随便加点小球&#xff0c;然后在AR中显示出来。 效果如下图&#xff1a; 以下为操作流程。 新建项目 新建一个空项目&#xff0c;项目一定要选择 Augmented Reality App&#xff0c;能够省很多的事。 之后的 conte…

【日常总结】如何禁止浏览器 http自动跳转成https

一、场景 二、问题 三、解决方案 3.1 chrome 浏览器 3.2 edge 浏览器&#xff1a; 3.3 Safari 浏览器 3.4 Firefox 浏览器 一、场景 公司网站 http:// 谷歌浏览器中自动转换成 https:// 导致无法访问 二、问题 nginx配置ssl 443接口&#xff0c; https:// 可以访问&…

java操作富文本插入到word模板

最近项目有个需求&#xff0c;大致流程是前端保存富文本&#xff08;html的代码&#xff09;到数据库&#xff0c;后台需要将富文本代码转成带格式的文字&#xff0c;插入到word模板里&#xff0c;然后将word转成pdf&#xff0c;再由前端调用接口下载pdf文件&#xff01; 1、思…

如何一键消除图片里的水印?图片去水印教程一看就会!

如何一键消除图片水印&#xff1f;在现今的数字时代&#xff0c;我们常常会遇到带有水印的图片&#xff0c;而传统的方法往往费时且复杂&#xff0c;让我们感到困扰。那么如何一键消除图片水印呢&#xff1f;今天&#xff0c;我们为您推荐一款非常实用的去水印软件&#xff0c;…

MySQL的体系结构与SQL的执行流程

文章目录 前言体系结构SQL语句的执行流程1、连接MySQL2、查询缓存3、解析SQL语句4、优化SQL语句5、执行SQL语句 总结 前言 如果你在使用MySQL时只会写sql语句的&#xff0c;那么你应该看一下《MySQL优化的底层逻辑》。如果你只了解到sql是如何优化的&#xff0c;那么你应该通过…

想问问各位大佬,网络安全这个专业普通人学习会有前景吗?

网络安全是一个非常广泛的领域&#xff0c;涉及到许多不同的岗位。这些岗位包括安全服务、安全运维、渗透测试、web安全、安全开发和安全售前等。每个岗位都有自己的要求和特点&#xff0c;您可以根据自己的兴趣和能力来选择最适合您的岗位。 渗透测试/Web安全工程师主要负责模…

鼠标拖拽问题,不选中文本不触发单击事件

文章目录 1. 为什么鼠标单击的时候触发了mousemove事件&#xff1f;明明鼠标没有移动2. 鼠标拖拽元素怎么能不触发单击事件&#xff1f;怎么处理鼠标在元素内的相对定位&#xff0c;而不是每次定位到左上角&#xff1f;方式一&#xff1a;拖拽的元素没有注册click监听就不会触发…