【Vue面试题】Vue2.x生命周期?

文章目录

  • 1.有哪些生命周期(系统自带)?
    • beforeCreate( 创建前 )
    • created ( 创建后)
    • beforeMount (挂载前)
    • mount (挂载后)
    • beforeUpdate (更新前)
    • updated (更新后)
    • beforeDestroy(销毁前)
    • destroy(销毁后)
  • 2.一旦进入到页面或组件,会执行哪些生命周期,顺序。
  • 3.在哪个阶段有 e l ,在哪个截断有 el,在哪个截断有 el,在哪个截断有data
  • 4.如果加入了keep-alive,会多2个生命周期
    • activated(激活)
    • deactivated(失效)
  • 5.如果加入了keep-alive,第一次进入组件会执行哪些生命周期?
  • 6.如果加入了keep-alive,第二次或第N次进入组件会执行哪些生命周期?

1.有哪些生命周期(系统自带)?

beforeCreate( 创建前 )

在实例初始化之后,进行数据侦听和事件/侦听器的配置之前同步调用。
此时组件的选项对象还未创建,el 和 data 并未初始化,因此无法访问methods, data, computed等上的方法和数据

created ( 创建后)

在实例创建完成后被立即同步调用。在这一步中,实例已完成对选项的处理,意味着以下内容已被配置完毕:数据侦听、计算属性、方法、事件/侦听器的回调函数。然而,挂载阶段还没开始,且 $el property 目前尚不可用。

beforeMount (挂载前)

在挂载开始之前被调用:相关的 render 函数首次被调用。

该钩子在服务器端渲染期间不被调用。

mount (挂载后)

实例被挂载后调用,这时 el 被新创建的 vm.$el 替换了。如果根实例挂载到了一个文档内的元素上,当 mounted 被调用时 vm.$el 也在文档内。

注意 mounted 不会保证所有的子组件也都被挂载完成。如果你希望等到整个视图都渲染完毕再执行某些操作,可以在 mounted 内部使用 vm.$nextTick

mounted: function () {
  this.$nextTick(function () {
    // 仅在整个视图都被渲染之后才会运行的代码
  })
}

该钩子在服务器端渲染期间不被调用。

beforeUpdate (更新前)

在数据发生改变后,DOM 被更新之前被调用。这里适合在现有 DOM 将要被更新之前访问它,比如移除手动添加的事件监听器。

该钩子在服务器端渲染期间不被调用,因为只有初次渲染会在服务器端进行。

updated (更新后)

在数据更改导致的虚拟 DOM 重新渲染和更新完毕之后被调用。

当这个钩子被调用时,组件 DOM 已经更新,所以你现在可以执行依赖于 DOM 的操作。然而在大多数情况下,你应该避免在此期间更改状态。如果要相应状态改变,通常最好使用计算属性或 watcher 取而代之。

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

updated: function () {
  this.$nextTick(function () {
    //  仅在整个视图都被重新渲染之后才会运行的代码     
  })
}

该钩子在服务器端渲染期间不被调用。

beforeDestroy(销毁前)

实例销毁之前调用。在这一步,实例仍然完全可用。

该钩子在服务器端渲染期间不被调用。

destroy(销毁后)

实例销毁后调用。该钩子被调用后,对应 Vue 实例的所有指令都被解绑,所有的事件监听器被移除,所有的子实例也都被销毁。

该钩子在服务器端渲染期间不被调用。

在这里插入图片描述

2.一旦进入到页面或组件,会执行哪些生命周期,顺序。

beforeCreate
created
beforeMount
mounted

3.在哪个阶段有 e l ,在哪个截断有 el,在哪个截断有 el,在哪个截断有data

beforeCreate:啥也没有
created:有data没有el
beforeMount:有data没有el
mounted:都有

4.如果加入了keep-alive,会多2个生命周期

activated
deactivated

activated(激活)

被 keep-alive 缓存的组件激活时调用。

该钩子在服务器端渲染期间不被调用。

deactivated(失效)

被 keep-alive 缓存的组件失活时调用。

该钩子在服务器端渲染期间不被调用。

5.如果加入了keep-alive,第一次进入组件会执行哪些生命周期?

beforeCreate
created
beforeMount
mounted
activated

6.如果加入了keep-alive,第二次或第N次进入组件会执行哪些生命周期?

只执行一个生命周期:activated

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

vue3:自定义指令

一、理解vue指令 1.1、指令 在 vue 中提供了一些对于页面和数据更为方便的输出&#xff0c;这些操作就叫做指令&#xff0c;以 v-xxx 表示&#xff0c;比如 html 页面中的属性 <div v-xxx ></div>。自定义指令很大程度提高了开发效率&#xff0c;提高了工程化水平…

git简介和使用、基础命令

文章目录 一、git的安装与配置二、Git工作区原理三、Git的使用和仓库的创建四、Git的常用操作五、配置公钥六、IDEA中配置Git 一、git的安装与配置 https://tortoisegit.org/ 下载对应版本安装即可 注意&#xff1a;配置中输入邮箱和密码一定要和自己的git账户一致 git的配置…

面试华为测试岗,收到offer后我却毫不犹豫拒绝了....

我大学学的是计算机专业&#xff0c;毕业的时候&#xff0c;对于找工作比较迷茫&#xff0c;也不知道当时怎么想的&#xff0c;一头就扎进了一家外包公司&#xff0c;一干就是2年。我想说的是&#xff0c;但凡有点机会&#xff0c;千万别去外包&#xff01; 在深思熟虑过后&am…

【模拟IC学习笔记】 反馈

反馈的作用&#xff1a;增益灵敏度降低 采用开环的方式实现一个精确的增益比较困难&#xff0c;但是可以实现高增益。 增益灵敏度衍生出来的另外两个特点 1、增加系统带宽。 2、改变输出阻抗&#xff0c;提高驱动能力。 反馈的作用&#xff1a;增加带宽 带宽的增加来源于…

ChatGPT实现markdown 格式与 emoji 表情

markdown 格式与 emoji 表情 书写文章时&#xff0c;巧妙的使用一些小图标&#xff0c;可以给文章增加不少的灵动感&#xff0c;读者也会感觉更加轻松。恰当的图标也能增进读者对内容的理解。ChatGPT 目前不能直接联网&#xff0c;但可以使用 emoji 表情文字来达到类似的效果。…

C++之数据对齐

目录 关于对齐数据对齐结构体对齐原则原理分析 关于对齐 对齐方式&#xff1a;表示的是一个类型的对象存放的内存地址应满足的条件好处&#xff1a;对齐的数据在读写上有性能优势对于不对齐的结构体&#xff0c;编译器会自动补齐以提高CPU的寻址效率 数据对齐 四个函数/描述…

机器学习实战:带你进入AI世界!

机器学习是人工智能领域的一个重要分支&#xff0c;可以帮助我们从大量数据中发现规律&#xff0c;进行预测和分类等任务。然而&#xff0c;想要真正掌握机器学习算法&#xff0c;并将其应用到实际问题中&#xff0c;还需要进行大量的实战练习。 本文将介绍几个常见的机器学习实…

6、Flutterr聊天界面网络请求

一、准备网络数据 1.1 数据准备工作 来到网络数据制造的网址,注册登录后,新建仓库,名为WeChat_flutter;点击进入该仓库,删掉左侧的示例接口,新建接口. 3. 接着点击右上角‘编辑’按钮,新建响应内容,类型为Array,一次生成50条 4. 点击chat_list左侧添加按钮,新建chat_list中的…

PAT A1032 Sharing

1032 Sharing 分数 25 作者 CHEN, Yue 单位 浙江大学 To store English words, one method is to use linked lists and store a word letter by letter. To save some space, we may let the words share the same sublist if they share the same suffix. For example, l…

如何利用ChatGPT进行论文润色-ChatGPT润色文章怎么样

ChatGPT润色文章怎么样&#xff1f; ChatGPT可以润色文章&#xff0c;使用其润色功能可以为用户提供更加整洁、清晰、文采动人的文本。但需要注意以下几点&#xff1a; 需要保持文本的一致性和完整性。当使用ChatGPT进行润色时&#xff0c;需要注意保持文本的一致性和完整性。…

和月薪5W的聊过后,才发现自己一直在打杂···

前几天和一个朋友聊面试&#xff0c;他说上个月同时拿到了腾讯和阿里的offer&#xff0c;最后选择了阿里。 我了解了下他的面试过程&#xff0c;就一点&#xff0c;不管是阿里还是腾讯的面试&#xff0c;这个级别的程序员&#xff0c;都会考察项目管理能力&#xff0c;并且权重…

Java程序设计入门教程---循环结构(while)

目录 思考 概念 语法 案例&#xff1a;求1到100的整数和&#xff1f; 案例分析 思考 1. 让你输出10000000000000000句“Hello,world!”&#xff0c;你怎么写代码&#xff1f; 2. 求1到100的整数和&#xff1f; 概念 循环结构程序多次循环执行相同或相近的任务。 while循环…

Windows在外远程桌面控制macOS 【macOS自带VNC远程】

文章目录 前言1.测试局域网内远程控制1.1 macOS打开屏幕共享1.2 测试局域网内VNC远程控制 2. 测试公网远程控制2.1 macOS安装配置cpolar内网穿透2.2 创建tcp隧道&#xff0c;指向5900端口 3. 测试公网远程控制4. 配置公网固定TCP地址4.1 保留固定TCP地址4.2 配置固定TCP端口地址…

什么?Python一行命令快速搭建HTTP服务器并公网访问?

文章目录 1.前言2.本地http服务器搭建2.1.Python的安装和设置2.2.Python服务器设置和测试 3.cpolar的安装和注册3.1 Cpolar云端设置3.2 Cpolar本地设置 4.公网访问测试5.结语 转载自远程内网穿透的文章&#xff1a;【Python】快速简单搭建HTTP服务器并公网访问「cpolar内网穿透…

springboot第19集:权限

article 文章表sys_permission 后台权限表sys_role 后台角色表sys_role_permission 角色-权限关联表sys_user 用户表sys_user_role 用户-角色关联表 image.png image.png sys_user_role id user_id(用户id) role_id(角色id) sys_role id role_name(角色名) create_time(创建时间…

基于 EKS Fargate 搭建微服务性能分析系统

背景 近期 Amazon Fargate 在中国区正式落地&#xff0c;因 Fargate 使用 Serverless 架构&#xff0c;更加适合对性能要求不敏感的服务使用&#xff0c;Pyroscope 是一款基于 Golang 开发的应用程序性能分析工具&#xff0c;Pyroscope 的服务端为无状态服务且性能要求不敏感&…

部署simple-chat项目

simple-chat介绍&#xff1a;此项目是基于openAI3.5模型的h5端人工智能聊天项目&#xff0c;无需翻墙即可体验。 simple-chat线上地址&#xff1a;simple-chat simple-chat项目地址&#xff1a;GitHub - AMxiaoming/simple-chat nginx部署前端步骤&#xff1a; https://blo…

MySQL基础(十八)MySQL8其它新特性

1. MySQL8新特性概述 MySQL从5.7版本直接跳跃发布了8.0版本&#xff0c;可见这是一个令人兴奋的里程碑版本。MySQL 8版本在功能上做了显著的改进与增强&#xff0c;开发者对MySQL的源代码进行了重构&#xff0c;最突出的一点是MySQL Optimizer优化器进行了改进。不仅在速度上得…

HashSet和HashMap内部结构分析

首先明确一点&#xff1a;HashSet的底层就是HashMap HashSet与HashMap的不同点&#xff1a; HashMap存储的是键值对&#xff08;也就是key-value&#xff09;&#xff0c;即在调用HashMap的put方法时传入的两个值&#xff0c;而HashSet其实也是存储的键值对&#xff0c;但是键…

阿里云服务器镜像怎么选?操作系统版本选择说明

阿里云服务器镜像怎么选择&#xff1f;云服务器操作系统镜像分为Linux和Windows两大类&#xff0c;Linux可以选择Alibaba Cloud Linux&#xff0c;Windows可以选择Windows Server 2022数据中心版64位中文版&#xff0c;阿里云百科来详细说下阿里云服务器操作系统有哪些&#xf…
最新文章