Vue:描述Vue的生命周期以及相关面试题

2023-11-14

Vue的生命周期

Vue实例从创建到销毁的过程,即开始创建,初始化数据,编译模板,挂载DOM,渲染,更新,渲染,卸载等一系列过程。

Vue生命周期图示(转载)
在这里插入图片描述

Vue生命周期钩子即指生命周期函数(事件)

Vue生命周期有四个阶段,八个过程

create(初始化),mount(挂载),update(更新),destroy(销毁)

Vue生命周期往细地说,有八个过程(8个钩子函数):

生命周期钩子 详细发生
beforeCreate 在实例初始化之后,数据观测(data observer) 和 event/watcher 事件配置之前被调用。
created 实例已经创建完成之后被调用。在这一步,实例已完成以下的配置:数据观测(data observer),属性和方法的运算, watch/event 事件回调。然而,挂载阶段还没开始,$el 属性目前不可见。(可以使用数据)
beforeMount 在挂载开始之前被调用:相关的 render 函数首次被调用。
mounted el 被新创建的 vm. e l 替 换 , 并 挂 载 到 实 例 上 去 之 后 调 用 该 钩 子 。 如 果 r o o t 实 例 挂 载 了 一 个 文 档 内 元 素 , 当 m o u n t e d 被 调 用 时 v m . el 替换,并挂载到实例上去之后调用该钩子。如果 root 实例挂载了一个文档内元素,当 mounted 被调用时 vm. elrootmountedvm.el 也在文档内。
beforeUpdate 数据更新时调用,发生在虚拟 DOM 重新渲染和打补丁之前。你可以在这个钩子中进一步地更改状态,这不会触发附加的重渲染过程。
updated 由于数据更改导致的虚拟 DOM 重新渲染和打补丁,在这之后会调用该钩子。当这个钩子被调用时,组件 DOM 已经更新,所以你现在可以执行依赖于 DOM 的操作。
activated keep-alive 组件激活时调用。
deactivated keep-alive 组件停用时调用。
beforeDestroy 实例销毁之前调用。在这一步,实例仍然完全可用。
destroyed Vue 实例销毁后调用。调用后,Vue 实例指示的所有东西都会解绑定,所有的事件监听器会被移除,所有的子实例也会被销毁。

Vue生命周期相关面试题

  • 什么是Vue地生命周期?
    Vue实例从创建到销毁地过程,即开始创建,初始化数据,编译模板,挂载DOM、渲染,更新、渲染,卸载等过程。
  • Vue各个阶段(钩子函数)的作用/意义?
    生命周期中的多个钩子函数给了用户在不同阶段添加代码的机会。
  • 第一次页面加载会触发哪些钩子函数?
    beforeCreate、created、beforeMount、mounted
  • DOM渲染在什么周期已经完成?
    mounted
  • created和mounted的区别?
    created:调用时,此时模板还未渲染,不能操作DOM,主要用来初始化数据;
    mounted:调用时,此时模板已经渲染成html,可以操作DOM。

以上表格及图片出处:关于vue生命周期的简述

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

Vue:描述Vue的生命周期以及相关面试题 的相关文章

  • 怎么找到一个好名字idea插件开发

    VFS简介 虚拟文件系统 VFS 是一个Intellij Platform组件 它封装了大部分对活动文件的处理操作 为了达成以下目的 提供一个处理文件的通用API 而不关心文件的具体位置 无论文件位于磁盘上 归档文件中还是HTTP服务器上
  • Java基础_JDK下载安装与配置

    文章目录 开始前准备 JDK下载 JDK安装 环境配置 验证环境配置是否成功 开始前准备 在配置JDK之前 我们需要先下载并安装好JDK 若已下载则可以跳过该环节 JDK和JRE的区别 JRE是运行环境 程序运行必需 JDK是开发环境 包含

随机推荐

  • Mysql—C语言API接口

    Mysql C语言API接口 一 mysql arp访问数据的操作流程 1 初始化mysql操作句柄 2 连接mysql服务器 3 设置mysql客户端字符集 保持与服务器一致 4 选择要操作的数据库 5 定义sql语句 并且执行语句 6
  • 超级楼梯

    有一楼梯共M级 刚开始时你在第一级 若每次只能跨上一级或二级 要走上第M级 共有多少种走法 Input 输入数据首先包含一个整数N 表示测试实例的个数 然后是N行数据 每行包含一个整数M 1 lt M lt 40 表示楼梯的级数 Outpu
  • 战双服务器信息保留多久,《战双帕弥什》6月10日服务器异常处理进度及补偿方案...

    尊敬的各位指挥官 真的十分抱歉 傍晚的服务器异常给大家带来了不好的游戏体验 我们恳请指挥官的原谅 经过慎重的考虑 我们公布本次服务器异常问题的处理方案如下 1 星火服 问题描述 部分指挥官发生了不同程度的数据异常 处理方案 我们决定统一将星
  • STM32——SD卡实验(SDIO方式)

    一 SD卡简介 1 什么是SD卡 SD卡 Secure Digital Memory Card 即 安全数码卡 它是在MMC的基础上发展而来 是一种基于半导体快闪记忆器的新一代记忆设备 它被广泛的用于便携装置上使用 例如数码相机 个人数码助
  • 【二分法】剑指offer:二维数组中的查找

    对于二维数组中每一个一维数组 用二分查找 判断能否找到该数 leetcode专题笔记 二分法查找 1 附leetcode题 m0 52043808的博客 CSDN博客 代码 class Solution public bool binsea
  • react useState自定义hook函数(管理多组件公共状态)

    效果图如下 代码如下 div div
  • 抓取房地产信息:一个Python爬虫实战案例

    目录 目录 1 准备工作 2 分析网页结构 3 编写爬虫 4 提取房源信息 5 输出结果
  • 结合Simulink仿真聊聊PID--理论部分

    如何理解PID PID这个名词一般是电子信息类的学生都不会陌生 它是控制领域非常常见的算法 并且经久不衰 P 比例 I 积分 D 微分 为什么需要用到PID呢 打一个比方 一个12v的电池装到小车上 设置50 的占空比 相当于在小车电机上的
  • document.get:fail Error: cannot find document with _id xx, please make sure that the document exists

    1 解决方案 修改权限 或 新建此数据集 2 详细解读 小程序入门云开发的时候总是会遇到这样的问题 而且很坑很难发现 Error errCode 1 errMsg document get fail Error cannot find do
  • CTFhub技能树_Web RCE

    一 eval执行 1 分析 打开网站显示如下代码 大体意思是 判断cmd是否被设置 若cmd被赋值 则执行如下语句 否则就继续显示以上代码 eval REQUEST cmd 其中 eval 该函数可以把字符串作为PHP代码执行 REQUES
  • Windows上的RocketMQ安装以及测试

    废话不多说 步骤一 下载安装RocketMQ 地址 RocketMQ 官方网站 RocketMQ 步骤二 配置环境解压启动RocketMQ 解压后的目录 配置环境 启动bin目录里的文件 请使用cmd去启动 start mqnamesrv
  • mongodb的c++接口的说明

    mongodb的c 接口的说明 作者 habadog 日期 2011 年 08 月 02 日 发表评论 3 查看评论 mongodb c 接口说明 说明 IN表示输入参数 OUT表示输出参数 1 构造函数 DBClientConnectio
  • MySQL 逗号分隔,字符串拆分(横转竖)

    文章目录 一 含分隔符的字符串拆分 1 数字拆分 2 字段拆分 也就是行转列 二 涉及函数 1 字符串拆分 SUBSTRING INDEX str delim count 2 替换函数 replace str from str to str
  • node(npm)配置vue时出现 vue不是内部或外部命令!!!!!!

    网上找了很多资料 基本是说对了的 主要是环境问题 path 解决办法 用Everything这个软件搜索vue cmd的位置 搜索到这个批处理文件后把这个文件的路径加入Path中就行了 重新启动cmd执行 vue 看到下面的就说明 path
  • 生产注意事项

    目录 1 可用性 2 兼容性特性 3 运行时限制 4 OPLOG大小限制 5 WiredTiger缓存 6 事务和安全性 7 分片配置限制 8 分片集群和仲裁器 9 三成员主次仲裁器架构 10 获取锁 11 待处理的DDL操作和事务 12
  • COMS原理及门电路设计

    目录 1 N P MOS管的物理结构图 2 N P MOS管的工作原理 3 N P MOS管的抽象模型 4 典型门电路设计 1 cmos反相器设计 2 coms与非门与或非门设计 3 与或非门 或与非门设计 4 异或 同或设计 5 设计方法
  • Retroft各个版本的jar包和源码下载地址

    Retrofit各个版本下载 download jar包下载 http 101 96 8 155 central maven org maven2 com squareup retrofit2 retrofit 2 5 0 retrofit
  • springboot+canal+mysql+redis缓存双写一致性

    canal官网地址 https github com alibaba canal wiki QuickStart 基本上按照官网的步骤来就行 准备 首先服务器上要安装好jdk 因为canal运行需要jdk 同时把canal对应的端口在服务中
  • Android ADB Connection Refused(连接被拒绝)

    文章目录 小结 问题 解决 参考 小结 在对Android进行调试时 出现Android ADB Connection Refused 连接被拒绝 的错误 进行了解决 问题 在对Android进行调试时 出现Android ADB Conn
  • Vue:描述Vue的生命周期以及相关面试题

    Vue的生命周期 Vue实例从创建到销毁的过程 即开始创建 初始化数据 编译模板 挂载DOM 渲染 更新 渲染 卸载等一系列过程 Vue生命周期图示 转载 Vue生命周期钩子即指生命周期函数 事件 Vue生命周期有四个阶段 八个过程 cre