Vue2面试题1|[2024-11-04]

1.描述对Vue生命周期的理解

        对于生命周期,就是Vue中实例 在创建 -> 销毁:

                1. 创建 2.初始化数据 3.编译template 4.挂载DOM 5.渲染 6.更新渲染 7.卸载

        生命周期函数:        

beforeCreate实例创建之初,初始化插件
created组件已经创建完毕,异步请求获取 dom并没有生成
beforeMount组件挂载之前
mounted组件挂载之后,异步请求获取 render dom更新,页面变化
beforeUpdate数据发生变化,更新之前
updated数据发生变化更新后
beforeDestroy实例销毁前
destroyed销毁后
activatedkeep-alive组件激活
deactivatedkeep-alive组件停用
errorCaptured捕获实例的错误被调用

          在beforeCreate阶段,dom和data都是undefined;在created和beforeMount阶段,dom是undefined,data是可以获取的;在mounted阶段,dom和data可以获取。

        详解:

new Vue() const vm = new Vue(){}  // 创建空的实例对象
init events lifecycle// beforeCreate
init reactivity data injection methods// created
option
- yes 
- no el option vm.$mount(el)template
- yes compile
- no el outerHTML as template// beforeMount 此时,模版已经编译好 但是页面未更新
vm.$el replace $el// mounted 在DOM上进行渲染完成
// beforeUpdate
DOM re-render patch// updated
// beforeDestory
data methods filter directive 可用// destoryed

问题1:生命周期有哪些?发送请求在created还是mounted?

        生命周期有哪些? 

        Vue2.x系统自带有8个,分别是beforeCreate、created、beforeMount、mounted、beforeUpdate、updated、beforeDestroy,destroyed。

        发送请求在created还是mounted?

        这个问题具体要看项目和业务端的情况,因为组件的加载顺序是,父组件引入了子组件,那么先执行父组件的前3个生命周期(beforeCreate、created、beforeMount),再执行子组件的前4个生命周期,那么如果我们的业务是父组件引入子组件,并且优先加载子组件的数据,那么在父组件中,当前的请求要放在mounted中;如果当前组件没有依赖关系,那么放在哪个生命周期中请求都是可以的。

问题2:为什么发送请求不在beforeCreate里?beforeCreate和created有什么区别?

        为什么发送请求不在beforeCreate里?

        因为:如果请求是在methods中封装好了,在beforeCreate调用的时候,beforeCreate阶段是拿不到methods里面的方法的(会报错)。这个阶段根本没有this。

        beforeCreate和created有什么区别?

         beforeCreate没有$data,created中有$data

        beforeCreate拿不到methods中的方法,created是可以拿到methods中的方法的

问题3:在created中如何获取dom?

        1.只要写异步代码,获取dom是在异步中获取的,就可以了。

           例如:setTimeout、请求、Promise.xxx()等等...

        2.使用vue系统内置的this.$nextTick

问题4:一旦进入组件会执行哪些生命周期?

        beforeCreate、created、beforeMount、mounted

问题5:第二次或者第N次进去组件,会执行哪些生命周期?

        如果当前组件加入了keep-alive,只会执行一个生命周期 

        activated

        如果没有加入keep-alive

         beforeCreate、created、beforeMount、mounted

问题6:父组件引入子组件,那么生命周期执行的顺序是? 

        父:beforeCreate、created、beforeMount

        子:beforeCreate、created、beforeMount、mounted

                ......

                【若是父组件中引入了多个子组件,顺序执行所有子组件】

        父:mounted

问题7:加入keep-alive会执行哪些生命周期?

         如果使用了keep-alive组件,当前的组件会额外增加2个生命周期(系统8+2)

        activated、deactivated

        如果当前组件加入keep-alive第一次进入这个组件会执行5个生命周期

         beforeCreate、created、beforeMount、mounted、activated

问题8:keep-alive

        keep-alive是什么 : 缓存当前组件

问题9:你在什么情况下用过哪些生命周期?说一说生命周期使用场景

        created        ===>   单组件请求

        mounted      ===>   同步可以获取dom,如果子组件请求后父组件请求

        activated      ===>   判断id是否相等,如果不相同发送请求(例如商品的详情页)

        destroyed     ===>  关闭页面,记录视频播放的时间,初始化的时候从上一次的历史开始播放

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

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

相关文章

【自动化测试】如何在jenkins中搭建allure

相信大家在做自动化测试过程中,都会用到自动化测试环境,目前最常见的就是通过容器化方式部署自动化测试环境,但对于一些测试小白,不是很会搭建持续集成环境,特别是从0-1的过程,需要自行搭建很多依赖环境&am…

人才流失预测模型(机器学习)

1. 项目描述 ​ 企业的快速发展离不开人才的支撑,可是现在我国的企业的人才流失严重,人才流失问题现在已经成为了关系企业发展的一个重大的问题。这些企业要想在目前激烈的竞争中快速发展,就需要依靠自身的人力资源的来竞争。只有拥有比对方…

【Mac】安装 VMware Fusion Pro

VMware Fusion Pro 软件已经正式免费提供给个人用户使用! 1、下载 【官网】 下拉找到 VMware Fusion Pro Download 登陆账号 如果没有账号,点击右上角 LOGIN ,选择 REGISTER 注册信息除了邮箱外可随意填写 登陆时,Username为…

Java版企业电子招标采购系统源码Spring Cloud + Spring Boot +二次开发+ MybatisPlus + Redis

功能描述 1、门户管理:所有用户可在门户页面查看所有的公告信息及相关的通知信息。主要板块包含:招标公告、非招标公告、系统通知、政策法规。 2、立项管理:企业用户可对需要采购的项目进行立项申请,并提交审批,查看所…

【el-pagination的使用及修改分页组件的整体大小修改默认样式的宽度详细教程】

今天遇到个bug,使用element-puls中的分页的时候,长度会超出盒子,今天教大家如何修改el-pagination的宽度,以及修改分页组件的整体大小 直接修改 style"width: 100%; margin-top: 10px"不生效 控制台修改el-pagination…

单体架构的 IM 系统设计

先直接抛出业务背景! 有一款游戏,日活跃量(DAU)在两千左右,虽然 DAU 不高,但这两千用户的忠诚度非常高,而且会持续为游戏充值;为了进一步提高用户体验,继续增强用户的忠…

设计模式之单列模式(7种单例模式案例,Effective Java 作者推荐枚举单例模式)

前言 在设计模式中按照不同的处理方式共包含三大类;创建型模式、结构型模式和行为模式,其中创建型模式目前已经介绍了其中的四个;工厂方法模式、抽象工厂模式、生成器模式和原型模式,除此之外还有最后一个单例模式。 单列模式介绍…

具有扩展卷积的DCNN

目的: 进行了一系列实验来证明,在没有任何全连接层的情况下,具有扩展卷积的 DCNN 的性能并不比广泛使用的具有包含收缩(无零填充)卷积层和多个全连接层的混合结构的深度神经网络差。 DCNN:Deep convoluti…

【linux】查看不同网络命名空间的端口

在部署harbor时,内部用的是数据库postgresql,端口默认是: 5432,一开始以为这个数据库docker容器是在本命名空间中,一直用ss -lnt查询系统的端口,找不到5432端口。但是harbor要能正常使用,所有怀疑harbor的容…

W5500-EVB-Pico2评估板介绍

目录 1 概述 2 板载资源 2.1 硬件规格 2.2 硬件规格 2.3 工作条件 3 参考资料 3.1 RP2350 数据手册 3.2 W5500 数据手册 3.3 原理图 原理图 & 物料清单 & Gerber 文件 3.3 尺寸图 (单位 : mm) 3.4 参考例程 认证 CE FCC AWS 资质 Microsoft Azure 认证…

2024MoonBit全球编程创新挑战赛参赛作品“飞翔的小鸟”技术开发指南

本文转载自 CSDN:https://blog.csdn.net/m0_61243965/article/details/143510089作者:言程序plus 实战开发基于moonbit和wasm4的飞翔的小鸟游戏 游戏中,玩家需要通过上下左右按键控制Bird,在不断移动的障碍pipe之间穿梭&#xf…

认证授权基础概念详解

目录 认证 (Authentication) 和授权 (Authorization)的区别是什么? RBAC 模型了解吗? 什么是 Cookie ? Cookie 的作用是什么? 如何在项目中使用 Cookie 呢? 如何在 Spring Boot 中创建和读取 Cookie 创建 Cookie Cookie 到期日期 安全…

彻底解决idea不识别java项目

需求背景 下载了一个java swing的项目,通过idea导入后,项目无法识别。打开java文件,也不会报错,也不编译。 无法识别效果图 可以看到左侧的菜单,项目是没有被识别。 打开java文件,可以看到没有识别,java的图标也没有出现。 解决方法 1、打开Project Structure 2、修改…

R6:LSTM实现糖尿病探索与预测

🍨 本文为🔗365天深度学习训练营 中的学习记录博客🍖 原作者:K同学啊 一、实验目的: 学习使用LSTM对糖尿病进行探索预测 二、实验环境: 语言环境:python 3.8编译器:Jupyter notebook…

笔试题11 -- 装箱问题(01背包)

装箱问题(01背包) 文章目录 装箱问题(01背包)一、原题复现二、思路剖析三、示例代码 题目链接:NOIP2001装箱问题 一、原题复现 题目描述 有一个箱子容量为V(正整数,0 ≤ V ≤ 20000)…

【D3.js in Action 3 精译_038】4.2 D3 折线图的绘制方法及曲线插值处理

当前内容所在位置(可进入专栏查看其他译好的章节内容) 第一部分 D3.js 基础知识 第一章 D3.js 简介(已完结) 1.1 何为 D3.js?1.2 D3 生态系统——入门须知1.3 数据可视化最佳实践(上)1.3 数据可…

测试-正交表与工具pairs的介绍使用(1)

目录 正交表 生成正交表 步骤 实操 注意事项 编写测试用例 根据正交表编写测试用例 补充遗漏的重要测试用例 正交表 关于长篇大论也不多介绍了,我们只需要知道正交法的⽬的是为了减少⽤例数⽬,⽤尽量少的⽤例覆盖输⼊的两两组合 正交表的构成&…

抗晃电马达保护器在工业厂房中的应用

安科瑞刘鸿鹏 摘要 随着工业自动化水平的提高,生产线上电动机作为关键设备的使用频率不断增加。然而,工厂生产环境中的电力波动,尤其是晃电现象,会对电动机的正常运转造成干扰,甚至导致设备停机和生产中断。抗晃电型…

linux之调度管理(2)-调度器 如何触发运行

一、调度器是如何在程序稳定运行的情况下进行进程调度的 1.1 系统定时器 因为我们主要讲解的是调度器,而会涉及到一些系统定时器的知识,这里我们简单讲解一下内核中定时器是如何组织,又是如何通过通过定时器实现了调度器的间隔调度。首先我们…

RHCE循环执行的例行性任务--crontab(周期性)

1.每分钟执行命令 2.每小时执行 3.每天凌晨3点半和12点半执行脚本 4.每隔6小时,相当于6,12,18,24点半执行脚本 5.30半点,8-18/2表示早上8点到下午18点之间每隔2小时执行脚本代表 6.每天晚上9点30重启nginx 7.每月1号和10号4点45执行脚本 8. 每周六和周日…