Vue生命周期(详细)

news2024/11/26 15:50:59

生命周期 图:

可以理解vue生命周期就是指vue实例从创建到销毁的过程,在vue中分为8个阶段:创建前/后,载入前/后,更新前/后,销毁前/后。

一、创建(实例)

1、beforeCreate:这个阶段实例已经初始化,只是数据观察与事件机制尚未形成,不能获取DOM节点(没有data,没有el)
使用场景:因为此时data和methods都拿不到,所以通常在实例以外使用
2、created:实例已经创建,仍然不能获取DOM节点(有data,没有el)
使用场景:模板渲染成html前调用,此时可以获取data和methods,so 可以初始化某些属性值,然后再渲染成视图,异步操作可以放在这里

二、载入(数据)

1、beforeMount:是个过渡阶段,此时依然获取不到具体的DOM节点,但是vue挂载的根节点已经创建(有data,有el)
2、mounted:数据和DOM都已经被渲染出来了
使用场景:模板渲染成html后调用,通常是初始化页面完成后再对数据和DOM做一些操作,需要操作DOM的方法可以放在这里


三、更新

1、beforeUpdate:检测到数据更新时,但在DOM更新前执行
2、updated:更新结束后执行
使用场景:需要对数据更新做统一处理的;如果需要区分不同的数据更新操作可以使用$nextTick

四、销毁

1、beforeDestroy:当要销毁vue实例时,在销毁前执行
2、destroyed:销毁vue实例时执行



面试题


1、什么是 vue 生命周期?有什么作用

答:每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如,需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。同时在这个过程中也会运行一些叫做 生命周期钩子 的函数,这给了用户在不同阶段添加自己的代码的机会。(ps:生命周期钩子就是生命周期函数)例如,如果要通过某些插件操作DOM节点,如想在页面渲染完后弹出广告窗, 那我们最早可在mounted 中进行。

2、created和mounted的区别

  • created一般是在html渲染前的操作,此时el还是undefined,data已经存在。这里不能对dom进行操作。
  • mounted一般是在html渲染完成后的操作,此时el,data都已经加载完成,一般对dom的操作都写在mounted中,例如获取innerHTML,初始化echarts的时候。

3、第一次页面加载会触发哪几个钩子?

答:beforeCreate, created, beforeMount, mounted

4、简述每个周期具体适合哪些场景

答:

  • beforeCreate:在new一个vue实例后,只有一些默认的生命周期钩子和默认事件,其他的东西都还没创建。在beforeCreate生命周期执行的时候,data和methods中的数据都还没有初始化。不能在这个阶段使用data中的数据和methods中的方法
  • create:data 和 methods都已经被初始化好了,如果要调用 methods 中的方法,或者操作 data 中的数据,最早可以在这个阶段中操作
  • beforeMount:执行到这个钩子的时候,在内存中已经编译好了模板了,但是还没有挂载到页面中,此时,页面还是旧的
  • mounted:执行到这个钩子的时候,就表示Vue实例已经初始化完成了。此时组件脱离了创建阶段,进入到了运行阶段。 如果我们想要通过插件操作页面上的DOM节点,最早可以在和这个阶段中进行
  • beforeUpdate: 当执行这个钩子时,页面中的显示的数据还是旧的,data中的数据是更新后的, 页面还没有和最新的数据保持同步
  • updated:页面显示的数据和data中的数据已经保持同步了,都是最新的
  • beforeDestory:Vue实例从运行阶段进入到了销毁阶段,这个时候上所有的 data 和 methods , 指令, 过滤器 ……都是处于可用状态。还没有真正被销毁
  • destroyed: 这个时候上所有的 data 和 methods , 指令, 过滤器 ……都是处于不可用状态。组件已经被销毁了。

5、vue获取数据在哪个周期函数

答:一般 created/beforeMount/mounted 皆可。
比如如果你要操作 DOM , 那肯定 mounted 时候才能操作。

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

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

相关文章

问道管理:市盈率怎么计算?

市盈率是衡量一家公司股票价格是否合理的重要目标之一,核算市盈率的公式是将一家公司的股票价格除以每股收益,也便是市盈率 股票价格 每股收益。市盈率能够告诉你一个公司的股票价格是否高估或轻视,是投资者在买入或卖出一家公司股票时需求…

拒绝摆烂!C语言练习打卡第七天

🔥博客主页:小王又困了 📚系列专栏:每日一练 🌟人之为学,不日近则日退 ❤️感谢大家点赞👍收藏⭐评论✍️ 目录 一、选择题 📝1.第一题 📝2.第二题 &#x1f4d…

UE5.1 透明渲染流程框架图

相关文章: UE 透明物体绘制准备_sh15285118586的博客-CSDN博客 透明直接光和间接光生成_sh15285118586的博客-CSDN博客 Scene:Translucency-Translucency(AfterDOF)_sh15285118586的博客-CSDN博客 Scene:Translucency-Distortion &PostProcessing:ComposeTran…

系列十四、Chrome浏览器安装JSONView插件

一、下载JSONView插件 说明:如果能够上外网的话,在Chrome应用商店下载JSON格式化插件安装即可 我分享的链接: 链接:https://pan.baidu.com/s/1H8VUH8e9Tw7JqrlJEBnQQg?pwdyyds 提取码:yyds 二、安装 解压》Chrome…

MybatisPlus-Generator

文章目录 一、前言二、MybatisPlus代码生成器1、引入依赖2、编写生成代码3、配置说明3.1、全局配置(GlobalConfig)3.2、包配置(PackageConfig)3.3、模板配置(TemplateConfig)3.4、策略配置(StrategyConfig)3.4.1、Entity 策略配置3.4.2、Controller 策略配置3.4.3、Service 策略…

IDEA快速设置全局JDK

出bug 了 JDK 不识别了,才想起来要设置jdk ,现在一般查到的都是setting 设置全局的idea设置。但是老玩家的我怎么会不知道有一个设置全局jdk 的一个设置 setings 设置是对idea 的基础设置。 但是还有一个隐藏页面快捷键【CtrlAltShiftS】 接下来自己研究…

B080-RabbitMQ

目录 RabbitMQ认识概念使用场景优点AMQP协议JMS RabbitMQ安装安装elang安装RabbitMQ安装管理插件登录RabbitMQ消息队列的工作流程 RabbitMQ常用模型HelloWorld-基本消息模型生产者发送消息导包获取链接工具类消息的生产者 消费者消费消息模拟消费者手动签收消息 Work QueuesSen…

docker启动paddlespeech服务,并使用接口调用

一、检查docker容器是否启动 1.输入命令 systemctl status docker 启动 systemctl start docker 守护进程重启 sudo systemctl daemon-reload 重启docker服务 systemctl restart docker 重启docker服务 sudo service docker restart 关闭docker service docker…

【Nacos】使用Nacos进行服务发现、配置管理

Nacos Nacos是 Dynamic Naming and Configuration Service 的首字母简称&#xff0c;一个更易于构建云原生应用的动态服务发现、配置管理和服务管理平台。 版本说明&#xff1a;版本说明 alibaba/spring-cloud-alibaba Wiki GitHub <properties><java.version>…

21 Linux高级篇-日志管理

21 Linux高级篇-日志管理 文章目录 21 Linux高级篇-日志管理21.1 系统常用的日志21.2 日志管理服务rsyslogd21.2.1 *日志记录原理21.2.2 配置文件/etc/rsyslog.conf21.2.3 日志文件格式 21.3 日志轮替21.3.1 配置文件/etc/logrotate.conf & /etc/logrotate.d/21.3.2 可执行…

memcpy 函数

目录 函数介绍&#xff1a; 函数解析&#xff1a; memcpy函数复制的数据长度 内存重叠 凑不出元素的字节数 模拟memcpy 函数介绍&#xff1a; memcpy函数是一个用于内存复制的函数&#xff0c;声明在 string.h 中&#xff08;C是 cstring&#xff09;。 其原型是&…

Excel操作技巧:如何粘贴保留单元格大小

有时我们需要在Excel中复制和粘贴并保持单元格大小。它在工作中节省了很多时间。也使数据集更具吸引力。在这篇文章中,我们将通过一些简单快捷的示例和解释来学习如何做到这一点。 一、使用上下文菜单在Excel中复制和粘贴以保持单元格大小 上下文菜单是Excel的一个重要功能。…

Openlayers 叠加天地图-中国近海海洋等深面图层服务

Openlayers 叠加天地图-中国近海海洋等深面图层服务 核心代码完整代码&#xff1a;在线示例 偶然发现天地图有一个近海海洋图层&#xff0c;觉得不错&#xff0c;于是尝试叠加一下&#xff0c;花费了一些时间&#xff0c;叠加成功&#xff0c;这里分享一下。 本文包括核心代码…

将OSGB格式数据转换为3d tiles的格式

现有需求需要将已有的一些OSGB数据加载到CesiumJS中展示,但是CesiumJS本身不支持osbg格式的数据渲染所以我们需要将其转换一下,有两种格式可以转换一种是glTF格式,另一种是我们今天要介绍的3D Tiles格式 下载开源工具 在github上其实有好多这种工具,每个工具的用法大同小异,这…

Python2021年3月Python二级 -- 编程题解析

题目一 设计一个停车场收费计算器 (收费规则&#xff0c;2小时以内收费5元&#xff0c;超出部分每小时加收2元)&#xff0c;:要求如下: 1.设计的程序要能输入停车时间 (单位为小时&#xff0c;输入的小时数为整数 2.程序可以根据输入的停车时间自动计算出停车费&#xff0c;并且…

java操作cmd执行adb命令【搬代码】

操作具体代码如下&#xff1a; 须注意的是commandStr0里面如果不加 cmd /的话会报 java.io.IOException: Cannot run program "cd": CreateProcess error2, 系统找不到指定的文件。的错误 package com.znzdh.until;import java.io.BufferedReader; import java.io.…

Unity 之 方括号[ ] 的用法以及作用

文章目录 在Unity中&#xff0c;方括号 [ ] 通常用于表示属性、特性&#xff08;Attributes&#xff09;或者元数据&#xff08;Metadata&#xff09;。这些标记提供了附加信息&#xff0c;可以用于修改类、方法、字段等的行为或者在编辑器中进行设置。 以下是一些常见的用法&…

面试:25Wqps高吞吐写Mysql,100W数据4秒写完,如何实现?

25Wqps是什么概念&#xff1f; QPS&#xff08;Queries Per Second&#xff09;&#xff1a;是衡量信息检索系统&#xff08;例如搜索引擎或数据库&#xff09;在一秒钟内接收到的搜索流量的一种常见度量。 通过概念我们能很清楚知道 QPS 并发数/响应时间&#xff0c;即100W…

conda创建python虚拟环境

1.查看当前存在那些虚拟环境 conda env list conda info -e 2.conda安装虚拟环境 conda create -n my_env_name python3.6 2.1在anaconda下改变python版本 当前3.7 安装3.7 conda create -n py37 python3.7 conda activate py37 conda create -n py37 python3.7conda a…