vue2面试题:对vue生命周期的理解

vue2面试题:对vue生命周期的理解

  • 回答思路:生命周期是什么-->生命周期有哪些-->生命周期的总体流程-->数据请求在created和mouted的区别
    • 生命周期是什么
    • 生命周期有哪些
    • 生命周期的总体流程
      • beforeCreate-->created:
      • created:
      • created-->beforeMount:
      • beforeMount
      • beforeMount -->mounted
      • mounted
      • beforeUpdate
      • updated
      • beforeDestroy
      • destroy
    • 数据请求在created和mouted的区别
      • 相同点:
      • 区别:

回答思路:生命周期是什么–>生命周期有哪些–>生命周期的总体流程–>数据请求在created和mouted的区别

生命周期是什么

生命周期(life cycle)的概念应用很广泛,在政治、经济、环境、技术、社会等诸多领域都会经常出现,可通俗理解为“从摇篮到坟墓”的整个过程,在vue中从实例的创建到销毁过程就是生命周期,即从创建、初始化数据、编译模板、挂载Dom–>渲染、更新–>渲染、卸载等一系列过程,可以把组件比作工厂的一条流水线,每个工人就是不同的生命周期,站在各自的岗位,执行各自的任务,在vue生命周期钩子会自动绑定this上下文到实例中,因此你可以访问数据,对property和方法进行运算,所以我们不能使用箭头函数来定义生命周期方法

生命周期有哪些

可分为八个阶段,创建前后、挂在前后、更新前后、卸载前后,还有一些特殊场景的生命周期

生命周期描述
beforeCreate组件实例被创建之前
created组件实例已经完全被创建
beforeMount组件挂载之前
mounted组件挂载到实例上去之后
beforeUpdate组件数据发生变化,更新之前
updated组件数据更新之后
beforeDestroy组件实例销毁之前
destroyed组件实例销毁之后
activatedkeep-alive缓存的组件激活时调用
deactivatedkeep-alive缓存的组件停用时调用
errorCaptured捕获一个来自子孙组件的错误时被调用

生命周期的总体流程

beforeCreate–>created:

初始化vue实例,进行数据观测

created:

1.完成数据观测,属性、方法的运算,watch、event事件回调的配置
2.可调用methods中的方法,访问和修改data数据触发响应式渲染dom,可通过computed和watch完成数据计算
3.此时vm.$el还没被创建

created–>beforeMount:

1.判断是否存在el选项,若不存在则停止编译,直到调用vm.$mount(el)才会继续编译
2.优先级:render>template>outerHTML
3.vm.el获取到的是挂载的DOM

beforeMount

1.可以获取到vm.el
2.vm.el虽然已初始化,但并未挂载到el上

beforeMount -->mounted

vm.el挂载完毕,vm.$el生成的DOM替换了el选项对应的DOM

mounted

vm.el完成DOM的挂载与渲染,此刻打印vm.$el,发现之前的挂载点及内容已被替换成新的DOM

beforeUpdate

1.更新的数据必须是被渲染到模板上的(el,template,render之一)
2.此时view层还没更新
3.若在beforeUpdate再次修改数据,不会再次触发更新方法

updated

1.完成view层更新
2.若在updated中再次更新则会重新调用beforeUpdate

beforeDestroy

实例被销毁前调用,此时属性和方法还是可以访问

destroy

1.完全销毁一个实例,清理它与其它实例的连接,解绑它的全部指令及事件监听器
2.并不能清除DOM,仅仅销毁实例

数据请求在created和mouted的区别

相同点:

都能拿到实例对象的属性和方法

区别:

1.created是在组件实例一旦创建完成的时候立刻调用,此时页面dom节点并未生成,mounted是在页面dom节点渲染完毕后执行的,created比mounted先
2.如果请求放在mounted中可能会导致页面闪动,因为此时页面dom结构已经生成,如果在页面加载前完成请求就不会出现这个情况,所以建议请求放在created中

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

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

相关文章

ctfshow-反序列化(web271-web276)

目录 web271 web272-273 web274 web275 web276 为什么不用分析具体为什么能成功 ,后面会有几个专题 会对php框架进行更深入的了解 这里面会专门的研究 为什么能够实现RCE 前面作为初步的熟悉 首先知道一下他的框架 知道框架的风格 知道啥版本可以用什么来打 首先先不用太研…

通用大模型研究重点之一:data embedding

研究背景 在过去的传统机器学习中,通常我们是直接处理同一类型的数字类型数据。随着深度学习发展,在图像,文本,语音领域分别取得了超越平均人类水平后,多模态数据的量随着互联网技术指数性增长,近两年自媒…

分布式 ID 的几种实现方式

随着互联网技术的快速发展,分布式系统在各个领域得到了广泛的应用。分布式 ID 是分布式系统中的一种重要概念,用于唯一标识系统中生成的各种数据。在分布式环境下,如何高效、可靠地生成分布式 ID 是一个具有挑战性的问题。本文将介绍几种常见…

2024最新软件测试面试题合集

1、前端和后端有什么区别 前端能够从 App 屏幕和浏览器上看到的东西。例如,你所看到的内容、按钮、图片,它们都属于前端。 后端就是那些你在屏幕上看不到但又被用来为前端提供支持的东西。网站的后端涉及搭建服务器、保存和获取数据,以及用于…

自定义注解与拦截器实现不规范sql拦截(自定义注解填充插件篇)

在自定义注解与拦截器实现不规范sql拦截(拦截器实现篇)中提到过,写了一个idea插件来辅助对Mapper接口中的方法添加自定义注解,这边记录一下插件的实现。 需求简介 在上一篇中,定义了一个自定义注解对需要经过where判…

[足式机器人]Part2 Dr. CAN学习笔记- Kalman Filter卡尔曼滤波器Ch05

本文仅供学习使用 本文参考: B站:DR_CAN Dr. CAN学习笔记 - Kalman Filter卡尔曼滤波器 Ch05 1. Recursive Algirithm 递归算法2. Data Fusion 数据融合Covarince Matrix协方差矩阵State Space状态空间方程 Observation观测器3. Step by step : Deriatio…

【Java】面向对象之继承超级详解!!

文章目录 前言一、继承1.1 继承的概念1.1.1继承的语法 1.2 父类成员访问1.2.1 子类中访问父类的成员变量1.子类和父类中没有同名的成员变量2.子类和父类中有同名的成员变量 1.2.2子类中访问父类的成员方法成员方法名不同成员方法名字相同 1.3 super关键字1.4 子类构造方法1.5 继…

Python零基础教程5.1——Python官方自带Turtle.demo

官方装13最为致命 牛!Python自带画图demo引言DEMO有什么?总结 牛!Python自带画图demo 引言 我的电脑不是换新了嘛 所以 不得不重新下载Python 这一下 不得了 我下载了Python3.11.7这个版本 然后按照惯例 打开IDEL 平平无奇 但 我一不小心…

html 中video实现切换视频自动播放

需求 vue2实现的网页中播放视频&#xff0c;主要代码如下&#xff1a; <video :src"question.videoPath" controls object-fit"contain"></video> 现在遇到的问题的&#xff0c;视频切换后要手动点击才能播放&#xff0c;是否可以实现切换视频…

特斯拉开年再降价,2024年的汽车市场还会好吗?

“等等派”再度胜利&#xff01;1月12日&#xff0c;特斯拉中国官宣Model 3和Model Y降价。其中&#xff0c;Model 3焕新版下降15500元&#xff0c;Model 3长续航焕新版下调11500元&#xff1b;特斯拉Model Y后轮驱动版售价下调7500元&#xff0c;特斯拉Model Y长续航版售价下调…

《GitHub Copilot 操作指南》课程介绍

第1节&#xff1a;GitHub Copilot 概述 一、什么是 GitHub Copilot 什么是 GitHub Copilot GitHub Copilot是GitHub与OpenAI合作开发的编程助手工具&#xff0c;利用机器学习模型生成代码建议。它集成在开发者的集成开发环境&#xff08;IDE&#xff09;中&#xff0c;可以根…

Excel象限图

Excel象限图 1、背景描述2、象限图&#xff08;散点图&#xff09;3、象限图&#xff08;气泡图&#xff09; 1、背景描述 平常我们在工作中做图表时&#xff0c;使用最多的就是柱状形、折线图、饼图&#xff0c;这些图表主要为了展示趋势、对比和构成&#xff0c;但有时候我们…

说说对React中类组件和函数组件的理解?有什么区别?

说说对React中类组件和函数组件的理解&#xff1f;有什么区别&#xff1f; 回答思路&#xff1a;类组件-->函数组件-->区别类组件函数组件区别编写形式不同&#xff1a;状态管理不同&#xff1a;生命周期不同&#xff1a;调用方式的不同&#xff1a;获取渲染的值的方式不…

文本生成中的解码器方法

一.解码器的基本介绍 在文本生成任务中&#xff0c;解码器是生成序列的关键组件。解码器的目标是从先前生成的标记或隐藏状态中生成下一个标记。有几种方法用于设计文本生成中的解码器&#xff0c;以下是一些常见的解码器方法&#xff1a; Teacher Forcing&#xff08;教师强…

自己动手造一个状态机

自己动手造一个状态机 引言有限自动状态机 (FSM)五要素应用场景优势 开源产品造个轮子改造点Looplab fsm示例演示实现解析 改造过程 引言 有限自动状态机 (Finite-state machine , FSM) 通常用来描述某个具有有限个状态的对象&#xff0c;并且在对象的生命周期中组成了一个状态…

flink基本概念

1. Flink关键组件: 这里首先要说明一下“客户端”。其实客户端并不是处理系统的一部分&#xff0c;它只负责作业的提交。具体来说&#xff0c;就是调用程序的 main 方法&#xff0c;将代码转换成“数据流图”&#xff08;Dataflow Graph&#xff09;&#xff0c;并最终生成作业…

堆详解与优先级队列

导言&#xff1a; 我们知道队列是一种先进先出(FIFO)的数据结构&#xff0c;但是现实情况中&#xff0c;操作的数据有可能会有优先级&#xff0c;优先级高的数据要先出队。例如&#xff0c;医院的军人优先等等。而为此应运而生的就是优先级队列&#xff0c;java中可以使用Prio…

力扣hot100 相交链表 超全注释 满级表达

Problem: 160. 相交链表 文章目录 思路复杂度&#x1f496; Ac Code 思路 &#x1f468;‍&#x1f3eb; 参考题解 &#x1f469;‍&#x1f3eb; 参考图解 复杂度 时间复杂度: O ( n m ) O(nm) O(nm) 空间复杂度: 添加空间复杂度, 示例&#xff1a; O ( 1 ) O(1) O(…

详谈c++智能指针!!!

文章目录 前言一、智能指针的发展历史1.C 98/03 的尝试——std::auto_ptr2.std::unique_ptr3.std::shared_ptr4.std::weak_ptr5.智能指针的大小6.智能指针使用注意事项 二、智能指针的模拟实现三、C11和boost中智能指针的关系 前言 C/C 语言最为人所诟病的特性之一就是存在内存…