Vue2生命周期+八个钩子函数解析

一.vue生命周期的几个基本概念和常见问题


1.什么是vue的生命周期?

答案:一个vue实例从创建到销毁的过程。

2.vue生命周期有哪几个阶段?

答案:生命周期有四个阶段

分为以下四个阶段(有的可能叫法不一样)

  1. 创建   
  2. 挂载
  3. 更新
  4. 销毁

3.什么时候发送初始化渲染请求? 

在 Vue 中,初始化渲染请求是指在应用启动时,Vue 框架向服务器发送的请求,以获取初始数据并渲染页面,Vue是以数据驱动视图,所以初始化渲染请求越早越好,但注意,应在响应式数据创建之后,否则请求的数据无法储存起来。

4.什么时候可以操作Dom?

当 Vue 完成了组件的挂载(即组件已经被添加到 DOM 中)之后,你可以在这个阶段操作 DOM。这是操作 DOM 的最常见时机,因为此时组件已经渲染到页面上,简单来说就是,Dom已经渲染出来了,然后再操作Dom。


二.生命周期四个阶段的详解

1.创建阶段

这个阶段主要是为后面准备响应式数据,这个阶段主要是为了创建响应式数据,为后续渲染页面做准备。

2.挂载阶段

在这个阶段,Vue 开始解析模板,并将其编译为虚拟 DOM。这个阶段还没有开始挂载到 DOM 上,因此你无法访问到 DOM 元素,主要将一些例如插值表达式的模板语法进行渲染。

3.更新阶段

这个阶段会监听数据的修改,同时更新视图,另外,到更新阶段会进入一个数据修改和视图更新的循环,不会马上进入到销毁阶段,因为数据可能会修改多次,试图也会更新多次,只有当你不使用时,比如当你关闭浏览器,这是会进入销毁阶段。

4.销毁阶段

  • 解除组件与其他实例的依赖关系,比如取消订阅事件、定时器等。
  • 执行一些自定义的清理逻辑,例如关闭可能正在进行的异步请求。
  • 组件的所有指令都被解绑,所有的事件监听器都被移除。
  • 子组件也会被全部销毁。

作用:通过这两个阶段的处理,能够有效地释放组件占用的资源,避免内存泄漏等问题。


三.生命周期的八大钩子函数解析

钩子函数:在vue生命周期运行过程中,会自动运行一些函数,这些函数被称为钩子函数,作用是让开发者可以在特定阶段运行自己的代码。

1.beforeCreate钩子函数

在 beforeCreate 阶段,Vue 实例刚刚被创建,此时组件的选项对象(如 datacomputedmethods 等)还没有被初始化,也无法访问到这些选项中的数据和方法。

这个钩子函数通常用于在组件实例创建的最初阶段执行一些初始化的设置,但由于无法访问到组件的大部分数据和方法,所以其使用场景相对较少。

总结:此阶段响应式数据未准备好,大部分操作都干不了,不经常用,了解即可。

2.created钩子函数(重点)

此阶段响应式数据已准备完毕,可以进行一些简单的操作

created 钩子函数通常用于以下场景:

  • 执行异步操作,如从服务器获取数据,是发送初始化渲染器请求最好时机
  • 对数据进行预处理或者初始化操作
  • 设置定时器或者启动一些不需要立即执行的逻辑。

总结:此阶段一般配合ajax向服务器发送数据请求。

3.beforeMount钩子函数

它在组件的模板被渲染到 DOM 之前被调用

beforeMount 钩子函数通常用于以下场景:

  • 初始化一些依赖于 DOM 的操作,例如设置样式、监听事件等。
  • 执行一些需要在 DOM 渲染之前完成的操作。

总结:执行一些需要在 DOM 渲染之前完成的操作,比如设置样式,监听事件等在 beforeMount 钩子函数中访问的 DOM 元素不会存在,因为 DOM 挂载是在 mounted 钩子函数中完成的。

4.mounted钩子函数(重点)

它在组件的模板被渲染并挂载到 DOM 上之后被调用

mounted 钩子函数的一些特点:

  1. DOM 可用:在这个阶段,组件已经被渲染到 DOM 上,因此你可以访问操作 DOM 元素。

  2. 事件监听器已设置:所有的事件监听器都已经设置好了,你可以开始使用它们。

  3. 数据已处理:组件的响应式数据已经被处理,并且已经渲染到视图上。

mounted 钩子函数通常用于以下场景:

  • 获取外部资源:例如,从服务器获取数据,使用 axios 或 fetch API(推荐在created时从服务器请求数据)。

  • 执行依赖于 DOM 的操作:例如,使用原生 JavaScript 方法操作 DOM。

  • 添加事件监听器:在这个阶段添加的事件监听器将在组件的生命周期内持续存在。

注意:尽管 mounted 钩子函数保证了 DOM 已经挂载,但它不保证所有的子组件都已经挂载(比如实现一进网页文本框自动聚焦时会有这个问题)。如果需要确保所有子组件也已经被挂载,可以使用 nextTick 方法。

5.beforeUpdate钩子函数

它在组件更新之前被调用。这个钩子会在数据发生变化,但还没有开始重新渲染 DOM 时触发.

以下是 beforeUpdate 钩子函数的一些特点:

  1. 数据已更改:此时组件的数据已经更新,但 DOM 结构还没有被更新。

  2. 虚拟 DOM 已创建:Vue 已经创建了新的虚拟 DOM 树,但还没有将其应用到实际的 DOM 上。

  3. 可用于优化:如果你需要在更新之前访问或修改数据,或者执行某些优化操作,这个钩子是一个合适的地方。

beforeUpdate 钩子函数通常用于以下场景:

  • 执行数据更新前的检查:例如,确认数据是否满足某些条件。

  • 记录日志:记录数据变化前组件的状态。

  • 取消不必要的更新:在某些情况下,你可能决定取消这次更新。

注意:beforeUpdate 钩子函数中不能直接操作 DOM,因为此时实际的 DOM 更新还没有发生。如果你需要操作 DOM,应该使用 mounted 或 updated 钩子。此外,由于 Vue 3 引入了 Composition API,一些生命周期钩子有了变化(有兴趣可以了解一下)。

总结:主要用于更新前数据的修改或访问,一些优化操作,一般不会用到,

6.updated钩子函数

它在组件的 VDOM(虚拟DOM)更新之后被调用。当组件的数据发生变化时,Vue 会重新渲染组件,updated 钩子会在 DOM 更新完成后触发。

以下是 updated 钩子函数的一些特点:

  1. DOM 已更新:此时,Vue 已经将新的虚拟 DOM 树渲染到了实际的 DOM 中。

  2. 可用于访问更新后的 DOM:如果你需要在 DOM 更新后立即访问或操作 DOM 元素,这个钩子会非常有用。

  3. 不推荐直接操作 DOM:尽管可以在这个钩子中操作 DOM,但通常不推荐这样做,因为这可能会与 Vue 的响应式系统产生冲突。

updated 钩子函数通常用于以下场景:

  • 操作更新后的 DOM:例如,你可能需要基于新的 DOM 状态来调整某些样式或类。

  • 执行依赖于 DOM 的操作:比如,你可能需要获取某个 DOM 元素的尺寸或位置。

注意:由于 Vue 的异步更新队列,updated 钩子可能会在 DOM 更新完成后的下一个事件循环中调用。因此,如果你需要基于 DOM 更新执行某些操作,确保这些操作不会影响 Vue 的响应式系统,并且不会导致额外的 DOM 更新。

总结:此时Dom已经更新完毕,可以访问更新后的Dom节点,进行访问或修改。

7.beforeDestroy钩子函数

它在组件实例被销毁之前被调用。这个钩子提供了一种机会,可以在组件被销毁之前进行一些清理工作,如取消事件监听器、定时器、解绑自定义事件等,以避免内存泄漏。

beforeDestroy 钩子函数的一些特点:

  1. 在销毁之前调用:当组件被销毁之前,即在它从 DOM 中移除之前,这个钩子会被调用。

  2. 清理工作:这是进行清理工作的最后机会,比如移除事件监听器、定时器清理、解绑全局事件、销毁子组件实例等。

  3. 组件实例仍然可用:在 beforeDestroy 钩子函数被调用时,组件实例仍然完全可用,这意味着你还可以访问数据、方法、 computed 属性等。

注意:Vue 实例销毁时,其子实例也会被销毁。因此,如果你有子组件,它的 beforeDestroy 钩子也会被调用,在实际应用中,如果你在组件内部使用了如 window.addEventListener 或 document.addEventListener 这样的全局监听器,你也应该在 beforeDestroy 钩子中将它们移除,以防止在组件销毁后仍然保持监听状态,从而造成内存泄漏。

总结:主要用于销毁一些事件监听器、定时器、解绑自定义事件等,节省资源。

8.destroyed钩子函数

它发生在组件实例被完全销毁之后。在 destroyed 钩子函数中,组件实例已经从 DOM 中移除,所有的数据绑定和事件监听器都已经解绑,因此,这个钩子函数通常用于进行一些清理工作,确保组件不会在销毁后留下任何副作用

destroyed 钩子函数的一些特点:

  1. 组件已销毁:在 destroyed 钩子函数被调用时,组件实例已经被销毁,并且从 DOM 中移除。

  2. 无实例访问:由于组件实例已经被销毁,因此在 destroyed 钩子函数中不能访问组件的数据、方法、计算属性等。

  3. 清理工作:这是进行清理工作的一个合适时机,比如移除全局事件监听器、清理定时器、销毁子组件等。

注意:Vue 的生命周期钩子是按照特定的顺序调用的,destroyed 钩子是在 beforeDestroy 钩子之后调用的,确保了组件在完全销毁后进行清理。在 destroyed 钩子中,由于组件实例已经销毁,所以无法访问组件的数据和方法。

总结:destroyed 钩子函数是进行彻底清理的最后机会,因此,如果你需要在组件销毁后进行额外的清理工作,比如移除全局事件监听器,确保不会对其他组件或应用造成影响,那么这是一个合适的地方。


以上就是vue2中生命周期的解释和钩子函数的解析,可能有遗漏或者错误的地方,新手望见谅。

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

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

相关文章

《九界ol游戏源码》(游戏源码+客户端+服务端+工具+视频教程)喜欢研究游戏源码的看过来...

《九界》游戏以网络同名热门小说为文化蓝本,构筑了一个地海陆空四维冒险的庞大游戏世界。《九界》以“团队修真”为核心研发理念,引擎采用OGRE引擎,GUI的设计采用CEGUI,游戏设计,地图,音效都是花费了相当的…

哈默纳科HarmonicDrive谐波减速机的使用寿命计算

在机械传动系统中,减速机的应用无处不在,而HarmonicDrive哈默纳科谐波减速机以其独特的优势,如轻量、小型、传动效率高、减速范围广、精度高等特点,成为了众多领域的选择。然而,任何机械设备都有其使用寿命&#xff0c…

Python爬虫-中国汽车市场月销量数据

前言 本文是该专栏的第34篇,后面会持续分享python爬虫干货知识,记得关注。 在本文中,笔者将通过某汽车平台,来采集“中国汽车市场”的月销量数据。 具体实现思路和详细逻辑,笔者将在正文结合完整代码进行详细介绍。废话不多说,下面跟着笔者直接往下看正文详细内容。(附…

Java笔试面试题AI答之线程Thread(1)

答案来自 Kimi AI 目录 1. 进程和线程的区别?2. Java语言创建线程的方式有哪些?3. Java线程有哪几种可用状态?4. Java同步方法和同步代码块的区别?5. 在监视器(Monitor)内部,如何做线程同步的?6. 什么是死…

硅纪元视角 | 语音克隆突破:微软VALL-E 2,Deepfake新纪元!

在数字化浪潮的推动下,人工智能(AI)正成为塑造未来的关键力量。硅纪元视角栏目紧跟AI科技的最新发展,捕捉行业动态;提供深入的新闻解读,助您洞悉技术背后的逻辑;汇聚行业专家的见解,…

Web前端知识视频教程分享(五) Bootstrap

资料下载地址: https://545c.com/f/45573183-1336822373-45bb4f?p7526 (访问密码: 7526)

Flink内存管理机制

前言 在Flink的后台界面,可以看到整个Flink的内存情况。 如JobManager的内存情况: TaskManager的内存情况 一、Flink内存管理 Flink TaskManager内存组成整体结构图如下: 二、总内存管理 三、JobManager内存管理内存管理 四、TaskManager内…

vue3前端架构---打包配置

最近看到几篇vue3配置项的文章,转载记录一下 Vue3.2 vue/cli-service 打包 chunk-vendors.js 文件过大导致页面加载缓慢解决方案-CSDN博客文章浏览阅读2k次,点赞8次,收藏9次。Vue3.2 vue/cli-service 打包 chunk-vendors.js 文件过大导致页…

Lago - 使用 ClickHouse 扩展事件引擎

本文字数:4540;估计阅读时间:12 分钟 作者:Mathew Pregasen 本文在公众号【ClickHouseInc】首发 本周,我们欢迎来自 Lago 的一篇博客文章,介绍了他们如何使用 ClickHouse 扩展一个事件引擎,并在…

学习react-Provider解决props需要层层传递问题

1.组件数据传递问题 数据传递:A(顶级组件)-》B组件(子组件)、C组件(孙子组件)…很多组件 这样得通过props层层传递到下面的组件 还有另一种解决方法,即通过全局对象来解决,使用Prov…

搭建自己的金融数据源和量化分析平台(二):读取上交所股票列表

我在上交所没发现上交所有像深交所一样的一键下载股票xls文档的按钮,因此上交所的股票列表读取就会比较麻烦。总体思路是查出来所有股票的代码之后根据股票代码逐一发起HTTP请求读取公司英文名、总股本、流通股本等详细信息,这就导致上交所爬虫的网络交互…

堆的实现-适用于算法竞赛

首先讲一下能够实现的操作。 插入一个数查找最小值删除最小值删除任意一个元素修改任意一个元素 什么是堆? 堆其实是一棵完全二叉树。 即处理叶子节点和倒数第一层节点,其他节点都有两个子节点,而且顺序是从上到下,从左到右。 …

使用VMware安装Linux虚拟机

一、下载 通过百度网盘分享的文件:CentOS系统安装包 链接:https://pan.baidu.com/s/1_eqYl8HcNt2GcGDjgOElgg 提取码:cu07 二、安装 (1)双击打开软件 (2) 创建新的虚拟机 (3&…

PyQt ERROR:ModuleNotFoundError: No module named ‘matplotlib‘

Solution:打开cmd输入指令下载malplotlib pip install matplotlib

Kubernetes:优势、场景与特点

Kubernetes:优势、场景与特点 1、优势2、适应场景3、特点💖The Begin💖点点关注,收藏不迷路💖 1、优势 容器编排:自动化管理容器生命周期,简化运维。轻量级开源:降低部署成本,易于集成到现有系统。弹性伸缩:根据业务负载自动调整资源,确保应用性能。负载均衡:高…

微软第四季度财报预览:增长动力追踪

微软公司即将在2024年7月30日(周二)美国市场收盘后发布第四季度财务结果。 微软的收益 - 预期如何 美股券商开户通道 市场预计,微软即将到来的2024年第四季度的收入将年增长14.5%,达到644亿美元,高于2023年第四季度…

linux添加普通用户后无法使用K8S的kubectl命令怎么办/Linux普通用户管理K8S/Linux下普通用户无法使用K8S命令

1.给Linux添加普通用户 sudo useradd mqq #添加mqq账号 sudo passwd mqq #给mqq账号设置密码,需要输入2次,我输入密码是Admin1232.利用mqq用户输入K8S命令报错 3.给mqq用户提权 suduers文件位于路径/etc/sudoers #编辑文件/etc/sudoers vim /etc/su…

Matlab编程资源库(10)离散傅立叶变换

一、离散傅立叶变换算法简要 给定一个N点的离散信号序列x(n),其中n表示时刻,n 0, 1, 2, ..., N-1。 定义离散傅立叶变换的频域序列X(k),其中k表示频率,k 0, 1, 2, ..., N-1。 通过以下公式计算每个频率对应的复数值&#xff…

Python实战:实现B-树

B-树是一种自平衡的树数据结构,广泛用于数据库和文件系统中,因为它能够维护排序数据并支持高效的插入、删除和查找操作。在本篇博客中,我们将探讨B-树的概念,并通过Python实现来加深理解。 什么是B-树? B-树是一种平…

03。正式拿捏ArkTS语言第一天

1, 打印日志命令 : console.log() 2, 三种基本数据类型: number 数字类型 (数字) string 字符串类型(例如:“我是字符串”) boolean 布尔类型 (true 或者 false) ***…