面试题:说说vue2的生命周期函数?说说vue3的生命周期函数?说说vue2和vue3的生命周期函数对比?

说说vue2的生命周期函数?说说vue3的生命周期函数?说说vue2和vue3的生命周期函数对比?

  • 一、说说vue2的生命周期函数
    • 1.1 vue生命周期分为四个阶段、8个钩子
      • 1.1.1 beforeCreate 和 created 初始化阶段
      • 1.1.2 beforeMount 和 mounted 挂载阶段
      • 1.1.3 beforeUpdate 和 updated 更新阶段
      • 1.1.4 beforeDestroy 和 destroyed 销毁阶段
    • 1.2 常用的生命周期钩子?(你用过哪些钩子?)
    • 1.3 请问vue在第一次加载的时候,会执行哪些钩子?
    • 1.4 父子组件生命周期钩子
  • 二、说说vue3的生命周期函数
  • 三、说说vue2和vue3的生命周期函数对比

一、说说vue2的生命周期函数

1.1 vue生命周期分为四个阶段、8个钩子

1.1.1 beforeCreate 和 created 初始化阶段

官网图示如下:
在这里插入图片描述
beforeCreate:创建了vue实例,但是还没有创建data。(不常用)
created:创建了data,但是还没有挂载点$el。最早可以操作data的钩子,一般用于发送ajax请求。(常用)

1.1.2 beforeMount 和 mounted 挂载阶段

在这里插入图片描述
beforeMount:创建了$ el,但是还没有完成挂载。
mounted:完成初始渲染。最早可以操作dom元素的钩子,一般用于dom操作。比如:如果我的页面有图表,echarts.init( dom元素 ),即,一进来想要渲染dom图表,最早只能在这个钩子里面做。(常用)

1.1.3 beforeUpdate 和 updated 更新阶段

在这里插入图片描述
beforeUpdate:当data数据发生变化的时候执行,但是数据变了,还没有更新视图。(因为vue更新是异步过程)(不常用)
updated:更新视图(将变化后的数据重新渲染)(不常用)
updated钩子不常用:因为这是data中任意数据变化都会走,如果data中有很多数据,则这个钩子就会非常频繁,会浪费内存,我们不需要侦听data中所有数据的变化。

1.1.4 beforeDestroy 和 destroyed 销毁阶段

在这里插入图片描述
beforeDestroy:销毁前执行(还没有销毁)
执行时机:(1)组件使用v-if切换为false (2)调用vm.$destroy
应用场景:清除定时器:setInterval

destroyed:vm完成销毁(解绑侦听器、子组件、methods事件)

1.2 常用的生命周期钩子?(你用过哪些钩子?)

created:一般用于发送ajax请求;
mounted:一般用于操作dom(渲染echarts)
beforeDestroy:一般用于清除定时器

1.3 请问vue在第一次加载的时候,会执行哪些钩子?

四个钩子:beforeCreate、created、beforeMount、mounted

1.4 父子组件生命周期钩子

记住口诀:父子子父!!!
加载渲染过程:图片如下
在这里插入图片描述
更新阶段:
在这里插入图片描述
销毁阶段:
在这里插入图片描述

二、说说vue3的生命周期函数

在这里插入图片描述

三、说说vue2和vue3的生命周期函数对比

在这里插入图片描述

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

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

相关文章

bigemap如何添加四维地图?

工具 Bigemap gis office地图软件 BIGEMAP GIS Office-全能版 Bigemap APP_卫星地图APP_高清卫星地图APP 打开软件,要提示需要授权和添加地图,需要授权可以联系客服处理,然后点击选择地图这个按钮,列表中有个添加按钮点进去选择…

提高 After Effects 效率的 40 个最佳快捷键

After Effects 是运动图形和视觉效果的强大工具,但它也可能让人不知所措。拥有如此多的特性和功能,很容易让人迷失在软件中。但是,有一种方法可以简化您的工作流程并提高工作效率 - 使用键盘快捷键。 After Effects素材文件巨大、占用电脑内…

快递管理系统springboot 寄件物流仓库java jsp源代码mysql

本项目为前几天收费帮学妹做的一个项目,Java EE JSP项目,在工作环境中基本使用不到,但是很多学校把这个当作编程入门的项目来做,故分享出本项目供初学者参考。 一、项目描述 快递管理系统springboot 系统有1权限:管…

android 开发中常用命令

1.反编译 命令&#xff1a;apktool d <test.apk> -o <folderdir> 其中&#xff1a;test.apk是待反编译文件的路径&#xff0c;folderdir是反编译后的文件的存储位置。 apktool d -f <test.apk> -o <folderdir> 注意&#xff1a;如果dir已经存在&am…

【Java】2021 RoboCom 机器人开发者大赛-高职组(初赛)题解

7-1 机器人打招呼 机器人小白要来 RoboCom 参赛了&#xff0c;在赛场中遇到人要打个招呼。请你帮它设置好打招呼的这句话&#xff1a;“ni ye lai can jia RoboCom a?”。 输入格式&#xff1a; 本题没有输入。 输出格式&#xff1a; 在一行中输出 ni ye lai can jia Robo…

快手商品详情数据API 抓取快手商品价格、销量、库存、sku信息

快手商品详情数据API是用来获取快手商品详情页数据的接口&#xff0c;请求参数为商品ID&#xff0c;这是每个商品唯一性的标识。返回参数有商品标题、商品标题、商品简介、价格、掌柜昵称、库存、宝贝链接、宝贝图片、商品SKU等。 接口名称&#xff1a;item_get 公共参数 名…

单例模式-java实现

介绍 单例模式的意图&#xff1a;保证某个类在系统中有且仅有一个实例。 我们可以看到下面的类图&#xff1a;一般的单例的实现&#xff0c;是属性中保持着一个自己的私有静态实例引用&#xff0c;还有一个私有的构造方法&#xff0c;然后再开放一个静态的获取实例的方法给外界…

多线程与并发编程面试题总结

多线程与并发编程 多线程 线程和进程的区别&#xff1f; 从操作系统层面上来讲&#xff1a;进程(process)在计算机里有单独的地址空间&#xff0c;而线程只有单独的堆栈和局部内存空间&#xff0c;线程之间是共享地址空间的&#xff0c;正是由于这个特性&#xff0c;对于同…

php如何对接伪原创api

在了解伪原创api的各种应用形态之后&#xff0c;我们继续探讨智能写作背后的核心技术。需要说明的是&#xff0c;智能写作和自然语言生成、自然语言理解、知识图谱、多模算法等各类人工智能算法都有紧密的关联&#xff0c;在百度的智能写作实践中&#xff0c;常根据实际需求将多…

Vue [Day7]

文章目录 自定义创建项目ESlint 代码规范vuex 概述创建仓库向仓库提供数据使用仓库中的数据通过store直接访问通过辅助函数 mapState&#xff08;简化&#xff09;mutations传参语法(同步实时输入&#xff0c;实时更新辅助函数 mapMutationsaction &#xff08;异步辅助函数map…

【electron】electron安装过慢和打包报错:Unable to load file:

文章目录 一、安装过慢问题:二、打包报错&#xff1a;Unable to load file: 一、安装过慢问题: 一直处于安装过程 【解决】 #修改npm的配置文件 npm config edit#添加配置 electron_mirrorhttps://cdn.npm.taobao.org/dist/electron/二、打包报错&#xff1a;Unable to load…

计算机竞赛 python 机器视觉 车牌识别 - opencv 深度学习 机器学习

1 前言 &#x1f525; 优质竞赛项目系列&#xff0c;今天要分享的是 &#x1f6a9; 基于python 机器视觉 的车牌识别系统 &#x1f947;学长这里给一个题目综合评分(每项满分5分) 难度系数&#xff1a;3分工作量&#xff1a;3分创新点&#xff1a;3分 &#x1f9ff; 更多资…