VUE中的生命周期、每个生命周期可以干什么

news2024/11/25 13:47:13

生命周期

就VUE来说就是一个程序的即将创建到销毁的一个过程,也就是vm对象实例从创建到最终销毁的过程。

VUE生命周期4个阶段8个钩子函数(到某一阶段自动调用的函数)

在这里插入图片描述

1.初始阶段(虚拟的DOM生成)

beforeCreate()

初始化事件对象和生命周期,这时候调用beforeCreate()调用完以后进行初始化数据代理和数据检测的创建。这时候data还没创建无法访问data中的数据。
作用:可以在这时候加一些loading效果

created()

已经完成了初始化数据代理和数据监测可以访问data中的数据。
作用:结束loading效果,也可以发哦那个网络请求,获取数据,可以在这里添加定时器。

2.挂载阶段(真实DOM的生成)

beforeMount()

在这个函数内去操作DOM元素无法不生效。

Mount()

在这个函数内去操作DOM元素可以生效。到这里页面的初次渲染就结束了。
作用:可以操作页面的DOM元素。

3.更新阶段(只有data中的数据变化了才会进入这个阶段)

beforeUpdate()

data中数据已经变化了但是页面还没有变化就会调用这个钩子函数。
作用:适合再更新之前访问现有的DOM,移除一些已经添加的事件监听器。

Update()

data中的数据变化了页面也变化了就会调用这个钩子函数。
作用:适合页面更新后,对数据做统一的处理

4.销毁阶段(只有执行this.$destroy()方法才会执行)

这里销毁是vm上绑定的数据检测数据代理之类的属性,销毁的不是vm实例,vm实例依然存在。

beforeDestroy()

其实成为解绑更为合理,解绑监视器、子组件、自定义事件监听器、事件监听器(点击事件等)、数据之前做的事情。重点就是以上的都还未解绑还存在但是已经不可用了。
作用:适合做清除定时器。

Destroy()

解绑监视器、子组件、自定义事件监听器、事件监听器(点击事件等)、数据之后做的事情

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/785210.html

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

相关文章

width: calc(~“100% - 267px“);动态css 调样式

.result-filtering {color: #8b8b8b;display: flex;// width: 82.6%;width: calc(~"100% - 267px");}

证书文件无法生成.p12

做好的证书文件在生成.p12文件的过程中遇到了.p12选项置灰且无法选择并导出的情况 解决办法 起初认为生成的空白 CertificateSigningRequest 有问题,反反复复尝试几次制作后均无效; 而后发现问题出在了钥匙串访问的选项问题上 ... 将顶部菜单 tab 由"所有选项"切换至…

ActivityWatch配置跨平台同步(没弄完)

安装完后马上给你来个下马威&#xff1a; 具体内容如下&#xff1a; Traceback (most recent call last): File "aw_qt\__main__.py", line 3, in <module> File "click\core.py", line 1130, in __call__ File "click\core.py", l…

docker制作compose

第一步&#xff0c;先了解Compose是什么&#xff1f; Compose 项目是 Docker 官方的开源项目&#xff0c;负责实现对 Docker 容器集群的快速编排。 Compose有两个重要的概念 1.项目 &#xff1a;由一组关联的应用容器组成的一个完整业务单元&#xff0c;在docker-compose.ym…

最受欢迎的8种编程语言解析_kaic

国内目前最受欢迎的8种编程语言解析 在过去的 17 个月&#xff08;2022 年 1 月至 2023 年 5 月&#xff09;时间里&#xff0c;DevJobsScanner 通过分析超 1400 万个开发人员职位&#xff0c;并从中筛选了有明确编程语言需求的职位&#xff0c;得出了在 2023 年需求量最大的 …

Socket基本原理详解

socket的概念 故事要从一个插头说起。 插头与插座 当我将插头插入插座&#xff0c;那看起来就像是将两者连起来了。 风扇与电力系统建立"连接" 而插座的英文&#xff0c;又叫socket。 巧了&#xff0c;我们程序员搞网络编程时也会用到一个叫socket的东西。 其实两者…

[算法通关村] 1.1 单向链表的创建

各位读者朋友们&#xff0c; 从今天开始&#xff0c;我将通过博文的形式&#xff0c;概述数据结构中应知必会的基本算法&#xff0c; 由于我更加熟悉 Java 语言&#xff0c;所以全程使用 Java 语言进行叙述&#xff0c; 如果您发现了文章中的错误&#xff0c;请您不吝赐教。 什…

HCIP——OSPF综合实验

OSPF实验 一、实验拓扑二、实验要求三、实验思路四、实验步骤1、配置接口IP地址以及环回2、配置缺省路由3、配置MGRE环境4、配置OSPF5、修改网络类型6、重发布7、配置汇总空接口防环8、配置特殊区域&#xff1a;9、配置NAT环境10、加快收敛11、配置接口认证12、测试 一、实验拓…

ModHeader插件

ModHeader浏览器插件下载装载地址&#xff1a;&#xff08;microsoftedge&#xff09;ModHeader - Modify HTTP headers - Microsoft Edge Addonshttps://microsoftedge.microsoft.com/addons/detail/modheader-modify-http-h/opgbiafapkbbnbnjcdomjaghbckfkglc?refidbingshor…

MySQL 主从复制的认识 2023.07.23

一、理解MySQL主从复制原理 1、概念&#xff1a;主从复制是用来建立一个和 主数据库完全一样的数据库环境称为从数据库&#xff1b;主数据库一般是准实时的业务数据库。 2、作用&#xff1a;灾备、数据分布、负载平衡、读写分离、提高并发能力 3、原理图 4、具体步骤 (1) M…

微服务远程调用openFeign简单回顾

目录 一. OpenFeign简介 二. OpenFeign原理 演示使用 provider模块 消费者模块 配置全局feign日志 示例源代码: 一. OpenFeign简介 OpenFeign是SpringCloud服务调用中间件&#xff0c;可以帮助代理服务API接口。并且可以解析SpringMVC的RequestMapping注解下的接口&#x…

生物信息学_玉泉路_课堂笔记_04 第四章 高通量测序技术与 数据分析

&#x1f345; 课程&#xff1a;生物信息学_玉泉路_课堂笔记 中科院_2022秋季课 第一学期 &#x1f345; 个人笔记使用 &#x1f345; 2023/7/19 测序技术 鸟枪法测序 全球测试仪的使用情况 边合成边测序 深颜色是加的接头 adapter 浅颜色的是要测的片段 insert ① 重叠的情…

【iOS】动态链接器dyld

参考&#xff1a;认识 dyld &#xff1a;动态链接器 dyld简介 dyld&#xff08;Dynamic Linker&#xff09;是 macOS 和 iOS 系统中的动态链接器&#xff0c;它是负责在运行时加载和链接动态共享库&#xff08;dylib&#xff09;或可执行文件的组件。在 macOS 系统中&#xf…

Docker 安装 和 GPU 支持

一、Docker安装过程&#xff08;ubuntu18.04环境&#xff09; 清华镜像 docker 安装&#xff1a;docker-ce | 镜像站使用帮助 | 清华大学开源软件镜像站 | Tsinghua Open Source Mirror 1、由于apt官方库里的docker版本可能比较旧&#xff0c;所以先卸载可能存在的旧版本&…

Java 设计模式——原型模式

目录 1.概述2.结构3.实现3.1.浅拷贝3.2.深拷贝3.2.1.通过对象序列化实现深拷贝&#xff08;推荐&#xff09;3.2.2.重写 clone() 方法来实现深拷贝 4.优缺点5.使用场景 1.概述 &#xff08;1&#xff09;原型模式 (Prototype Pattern) 是一种创建型设计模式&#xff0c;是通过…

【2023裸辞失业后之初学RocketMQ】

目录 RocketMQ概述MQ概述常见的MQ产品常见的协议 Rocket的安装和启动基本概念系统架构安装RocketMQ和控制台 RocketMQ概述 MQ概述 Message Queue&#xff1a;是提供消息队列服务的中间件&#xff0c;提供消息生产&#xff0c;存储&#xff0c;消费的全过程。 作用&#xff1a…

刘铁猛C#语言教程——表达式详解1

表达式的定义 对以上文档的翻译&#xff1a; 对以上文档的代码解释&#xff1a;表达式是为了实现具体的算法逻辑并得到一个具体的值&#xff0c;而表达式的返回值可以是一个单值&#xff0c;也可以是实例&#xff0c;方法&#xff0c;或者命名空间&#xff1b;例如&#xff1a;…

微服务入门---SpringCloud(一)

微服务入门---SpringCloud&#xff08;一&#xff09; 1.认识微服务1.0.学习目标1.1.单体架构1.2.分布式架构1.3.微服务1.4.SpringCloud1.5.总结 2.服务拆分和远程调用2.1.服务拆分原则2.2.服务拆分示例2.2.1.导入Sql语句2.2.2.导入demo工程 2.3.实现远程调用案例2.3.1.案例需求…

当今网络的基本情况

1 网络表示方法和网络拓扑 1.1 网络表示方法 网络架构师和管理员必须能够展示他们的网络将是什么样子。他们需要能够轻松地看到哪些组件连接到其他组件&#xff0c;它们将位于何处&#xff0c;以及它们将如何连接。网络图通常使用图标&#xff08;如图中所示&#xff09;来表…

基于Citespace、vosviewer、R语言的文献计量学可视化分析技术及全流程文献可视化SCI论文高效写作方法

文献计量学是指用数学和统计学的方法&#xff0c;定量地分析一切知识载体的交叉科学。它是集数学、统计学、文献学为一体&#xff0c;注重量化的综合性知识体系。特别是&#xff0c;信息可视化技术手段和方法的运用&#xff0c;可直观的展示主题的研究发展历程、研究现状、研究…