Vue的生命周期理解,简单易理解

news2024/9/28 7:15:15

什么是Vue的生命周期

简单来说,Vue的生命周期就是vue实例从创建到销毁的一个过程,即从创建–>初始化数据–>编译模板–>挂载Dom -->渲染、更新 -->渲染–>销毁 的一系列过程。

Vue的生命周期有哪些阶段

Vue的生命周期,主要过程有:创建、挂载、更新、销毁 这四个过程,其对应的钩子函数执行顺序,分别是:
beforeCreate(创建前)、created(创建后)、beforeMount(挂载前)、mounted(挂载后)、beforeUpdate(更新前)、updated(更新后)、beforeDestroy(销毁前)、destroyed(销毁后)。
这里放一张官网的截图,可以更清晰的看到它们的执行过程:

在这里插入图片描述
值得注意的是,beforeUpdate(更新前)、updated(更新后)是在每次vue页面更新时,都会执行的钩子函数,通常我们可以在这些钩子函数中写一些页面更新会触发的逻辑。

钩子函数详解

了解钩子函数每个阶段进行了什么操作,可以方便我们在更合适的位置加入我们的逻辑
1)beforeCreate
在实例初始化(new Vue())后执行的函数,此时的数据监听和事件绑定机制都未完成,是获取不到DOM节点的。一般我们可以在此阶段加loading事件,在加载实例时触发

(2)created
在这个阶段vue实例已经创建,以下内容已被配置完毕:数据侦听、计算属性、方法、事件/侦听器的回调函数。但挂载阶段还没开始,仍然获取不到DOM元素。在此阶段,初始化完成时的事件写在这里,如在这结束loading事件,也可以进行异步请求

(3)beforeMount
在这个阶段完成了DOM的初始化,但仍然无法获取到具体的DOM元素,因为vue还没有进行根节点挂载,但是根节点已经创建完成,下面Vue对DOM的操作将围绕这个根节点进行。beforeMount这个阶段是过渡性的,在项目中使用得比较少

(4)mounted
在这个阶段,实例已经被挂载完成了,也就是能获取到数据和DOM元素了。

注意 mounted 不会保证所有的子组件也都被挂载完成。如果你希望等到整个视图都渲染完毕再执行某些操作,可以在 mounted 内部使用 vm.$nextTick.
(5)beforeUpdate
在数据发生改变,但页面还没有完成更新时执行的操作,在此阶段视图的数据和DOM元素的数据没有保持同步。这里适合在现有 DOM 将要被更新之前访问它,比如移除手动添加的事件监听器

(6)updated
这个时候数据发生了改变,并且视图页面也已经完成了更新,因此,该阶段看到的DOM元素的内容是最新内容。

注意updated 不会保证所有的子组件也都被重新渲染完毕。如果你希望等到整个视图都渲染完毕,可以在 updated 里使用 vm.$nextTick

(7)beforeDestroy
此阶段Vue实例仍然完全可用,也就是还能访问到页面的响应式数据和事件。可以在这里注销eventBus等事件

(8)destroyed
DOM元素被销毁,此时对应 的Vue 实例所有指令都被解绑,所有的事件监听器被移除,所有的子实例也都被销毁。

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

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

相关文章

使用 preloadRouteComponents 提升 Nuxt 应用的性能

title: 使用 preloadRouteComponents 提升 Nuxt 应用的性能 date: 2024/8/19 updated: 2024/8/19 author: cmdragon excerpt: preloadRouteComponents 是提升 Nuxt 应用性能的一个简单而有效的工具。通过在适当的时候预加载路由组件,你可以为用户提供更快速、更流…

LangGPT结构化提示词

LangGPT是Language For GPT-like LLMs的简称,中文名为结构化提示词,LangGPT是一个帮助你编写高质量提示词的工具,理论基础是我们提出的一套模块化、标准化的提斯提编写方法论——结构化提示词。我们希望揭开提示工程的神秘面纱,为…

传统园区转型升级智慧园区的路径探讨

随着科技的快速发展和经济结构的转型升级,传统园区面临着转型的迫切需求。智慧园区以其高效、绿色、智能的特点,成为了未来园区发展的方向。本文将从几个关键方面探讨传统园区如何实现向智慧园区的转型升级。 一、智慧园区的概念与特点 智慧园区是基于…

懂管理的网安人才,为什么越来越受企业青睐?

说实话,要是几年前有人跟我说网安人才还得懂管理,我可能会嗤之以鼻。网安不就是搞技术的吗?整天跟漏洞、防火墙、IDS打交道,为啥又扯到管理了? 但是仔细一想,好像时代确实变了。 由于现在的就业形势紧迫&a…

Gemma Chat【所有人都能本地部署的对话AI】

简介 Gemma Chat 是一个聊天应用,专注于实现高效的消息交互。这个项目使用 Docker 来简化部署流程gemma_chat,并且源代码托管在 GitHubGitHub - Park-C159/gemma_chat,方便开发者下载、修改和贡献。 技术栈和特色 Gemma Chat 的开发选用了 …

\r和\n不同系统的区别

文章目录 一、\r和\n的来源1、回车和换行来源2、关于字符2.1、可显示字符2.2、不可显示字符(控制字符) 二、\n和\r差异1、不同操作系统中的回车换行2、影响 一、\r和\n的来源 1、回车和换行来源 在最初的电传打印机时代,每打完一行需要换行的…

识别出未知的“FT232R USB UART”设备

使用串口调试助手测试485,笔记本电脑不识别端口,查看设备管理器后提示 识别出未知的“FT232R USB UART”设备 跳转FTDI官网下载驱动 (https://ftdichip.com/drivers/d2xx-drivers/) 继续往下拉 下载后安装即可正常使用

C++实战项目:日期计算器的实现

前言 Hello,小伙伴们,经过了前面对C基础知识的学习,我们今天就着重运用一下前面学习到的知识,来通过类和对象以及运算符重载的部分知识来实现,来完成我们的日期计算器。 日期计算器,顾名思义,…

C++入门基础知识21

成长路上不孤单😊【14后小学生一枚,C爱好者,持续分享所学,如有需要欢迎收藏转发😊😊😊😊😊😊😊】 关于【C 数据类型】 【!&#xff…

工业超高频读写器在工业领域的实际应用

工业级超高频读写器在多个领域具有广泛的应用,主要得益于其远距离读取、群读、穿透识别以及高数据传输速率等特性。以下是对其应用的具体分析: 一、物流仓储 货物追踪与管理:在物流仓储领域,工业级超高频读写器能够识别并跟踪货…

Python FlashText库:高效的关键词搜索和替换

更多Python学习内容:ipengtao.com 在文本处理中,关键词搜索和替换是常见且重要的任务。传统的正则表达式在处理大量文本时可能效率不高,而Python的FlashText库提供了一种高效的关键词搜索和替换方法,尤其适合处理海量数据。本文将…

746. 使用最小花费爬楼梯-dp3

. - 力扣(LeetCode). - 备战技术面试?力扣提供海量技术面试资源,帮助你高效提升编程技能,轻松拿下世界 IT 名企 Dream Offer。https://leetcode.cn/problems/min-cost-climbing-stairs/description/从左向右填dp表 class Solutio…

机器学习带来的新见解挑战星系形成理论

最近的研究发现,处于高密度环境中的星系往往比孤立的星系大得多,这对现有的星系形成理论提出了挑战。这一发现得益于机器学习和来自数百万个星系的大量数据。这些发现提出了关于暗物质和星系合并在塑造宇宙中的作用的新问题。 密集环境中的星系与孤立环境…

C语言—指针(1)

目录 一、内存和地址 (1.1)内存 (1.2)编址的理解 二、指针变量和地址 (2.1)取地址操作符(&) (2.2)指针变量和解引用操作符 (2.2.1&…

特征融合篇 | YOLOv10 应用轻量级通用上采样算子CARAFE | 《特征的内容感知重组》

特征上采样是现代卷积神经网络架构中的关键操作,例如特征金字塔。其设计对于密集预测任务,如目标检测和语义/实例分割至关重要。在本研究中,我们提出了一种称为内容感知特征重组(CARAFE)的通用、轻量级且高效的操作符,以实现这一目标。CARAFE具有以下几个优点:(1)大的…

【附源码】Python :正方体建模

系列文章目录 Python 建模入门:正方体建模 文章目录 系列文章目录一、建模需求二、源代码三、代码分析四、效果展示总结 一、建模需求 使用matplotlib库和mpl_toolkits.mplot3d模块来绘制一个立方体的3D图形 二、源代码 代码如下: import matplotlib.p…

从0-1开发一个Vue3前端系统页面-10.导航栏菜单选中问题

注意:本项目已将前端源码同步上传至Gitee,项目已开源,仅供参考,不涉及商用,著作权归本人所有。 开源项目链接:Wandering-children-have-the-stars-as-companions: WCHTSAC (gitee.com)https://gitee.com/C…

TCP通信,HTTP协议

TCP通信 1.流式套接字与数据报套接字的区别: 1.数据报套接字:每一包数据传输的目的可能不同,所以每一包需要单独处理(MTU:1500) 2.流式套接字:数据以流的形式连续的传输,有可能产生数据粘连,解决方式(固定长度、数据包间设定间隔 2.TCP包头…

内网安全:跨域攻击

目录 获取域信息 利用域信任密钥获取目标域 利用krbtgt哈希值获取目标域 内网中的域林: 很多大型企业都拥有自己的内网,一般通过域林进行共享资源。根据不同职能区分的部门,从逻辑上以 主域和子域进行区分,以方便统一管理。在…

C++学习笔记----3、设计专业的C++程序(八)---- 设计国际象棋程序

今天我们就来介绍一个系统性的方法去设计一个C程序,一个简单的国际象棋程序。为了提供完整的案例,有些步骤的概念目前还没有讲到。现在学习该案例来获得一一些人设计过程的整体印象,当你学习了那些概念后也可以再回头重新阅读本篇。 1、需求…