从分析Vue实例生命周期开始,剖析Vue页面跳转背后执行过程

文章目录

    • 1.概要
    • 2.Vue实例生命周期
    • 3.生命周期函数解释
    • 4.存在父子组件情况页面执行过程
    • 5. 分析路由跳转页面执行过程
    • 6.扩展补充
    • 7.小结

1.概要

本文旨在分析Vue页面进行路由切换时,Vue背后的运行过程,旨在让大家更加清晰地明白Vue页面运行过程中钩子方法的执行顺序,有利于大家更高效地完成前端开发任务。

2.Vue实例生命周期

提示:这个Vue项目运行时会构建Vue实例,这个还不清楚的,需要自己补充Vue基础知识

在这里插入图片描述

Vue2和Vue3生命周期流程图

3.生命周期函数解释

下面以Vue3为例子进行解释,Vue3不仅包含Vue2对应生命周期函数,且额外新增了setup函数,运行在所有生命周期函数之前。

1.setup函数
Vue3新增的一个函数,相当于Vue2的beforeCreate和created钩子函数,由于Vue3是兼容Vue2写法,因此setup会在这两个钩子函数之前执行。通常在setup函数内部定义所有钩子函数以及初始化 js/ts 变量,具体行为在对应的钩子函数和自定义函数中。

2.OnBeforeMount函数
这个是DOM树尚未完成挂载至浏览器页面中,此时对DOM操作是无效的。因此不能在这个周期函数内操作DOM元素,会失效。

3.OnMounted函数
这个函数表明浏览器已经完成对DOM元素的挂载渲染了,此时可以拿到DOM元素并进行DOM操作,一般书写页面初次进入,挂载DOM树完成后所需要执行的DOM操作,都在这个钩子函数中。注意:页面刷新会触发挂载操作,但是组件刷新通常不会触发这个函数执行。

4.OnBeforeUpdate函数
这个就是单个页面某个部分刷新时触发的钩子函数,比如页面由3个组件合并而成,其中如果某一个组件状态发生变化,则会触发这个钩子函数。这个在页面组件更新前执行。

5.OnUpdated函数
这个和OnBeforeUpdate一起触发,这个是页面更新后 后置处理函数。

6.OnDeactivated、OnActivated函数
OnDeactivated组件失活触发钩子函数,OnActivated组件激活触发钩子函数

下面结合一个简单例子讲述,比如一个页面某个位置动态展示两个不同子界面,
并且需要对子界面进行缓存,即子界面动态切换时,仍然保留之前的数据状态,以使用keep-alive组件进行包裹。其中截图Child、Child2声明为两个子组件。
动态组件展示可以使用component 组件is 属性来判断切换组件。下图就是2个组件分别名称为Child,Child2,根据state变量值来动态渲染。

在这里插入图片描述

假设当前state从false状态变为true,此时先让Child2组件失活,在激活Child组件
先调用Child2组件的OnDeactivated函数,再调用Child组件OnActivated函数。

这个方法执行过程中,是在当前父组件OnBeforeUpdate 和 OnUpdated之间执行

7.OnBeforeUnmount/OnUnmounted函数
onBeforeUnmount‌组件开始卸载之前执行,OnUnmounted组件完全卸载后执行。
通常用于取消定时器、移除事件监听器等操作。
OnUnmounted组件完全卸载之后执行,通常用来重置状态、移除全局事件监听器等清理工作。这两个过程用以组件卸载时清理工作,有效书写可避免内存泄漏。

4.存在父子组件情况页面执行过程

之前生命周期是针对单个组件,默认没有父子组件情况下的执行流程。实际开发中,一个复杂的页面通常是多个组件合成一个view视图,并且组件内部可以嵌套组件,此时页面加载执行顺序是如何的呢?
下面以一个只包含2个子组件的父组件的执行流程来做个简要分析。刷新页面直接看截图效果。
.vue 文件【大家忽略其他属性信息】
在这里插入图片描述
其中在每个组件内钩子函数书写了函数对应的console.log()信息,执行截图如下。
在这里插入图片描述

  1. 执行流程分别是父组件 setup->beforeCreate->created->onbeforeMount
  2. 按照书写顺序依次加载Child组件 setup->beforeCreate->created->onbeforeMount
  3. 按照书写顺序依次加载Child2组件 setup->beforeCreate->created->onbeforeMount
  4. 依次挂载Child 、Child2 组件,最后挂载当前父组件。

5. 分析路由跳转页面执行过程

`
前面已经分析了单组件页面、带有父子组件页面执行逻辑,实际开发中,页面与页面之间切换大部分是通过路由跳转来实现的,当然window.open()例外。这个路由跳转过程中又触发了那些函数操作呢?

1.触发路由导航router.push()或者router.replace()方法或者是使用`标签,其中replace方法不会讲路由加入至路由history中。
2.在失活的组件内调用beforeRouteLeave 守卫
3.调用全局前置守卫beforeEach
4.重用组件调用beforeRouteUpdate守卫
5.调用路由配置的beforeEnter守卫
6.激活组件内调用beforeRouteEnter 守卫
7.调用全局后置守卫afterEach
8.DOM更新
9.调用beforeRouteEnter 传给next()方法回调函数,组件实例作为参数传递。

这里着重讲几个最常用的守卫。
全局前置守卫 beforeEach:通常用于请求拦截,token校验,比如用户登录或者是会员登录信息校验,可以放在这里进行校验。
针对单个路由组件进行额外的处理,使用beforeEnter或者beforeRouteEnter 守卫。
beforeRouteUpdate 用以一个通用组件,针对不同参数频繁渲染的组件的钩子函数。

next()放行函数,为空表示啥也不做,这里书写具体的逻辑,是直接放行还是重定向还是返回错误信息等,都是使用next()钩子函数来完成,常见 next({path:'/home'}) 表示路由重定向/home路由 next(false) 表示中断路由导航

6.扩展补充

Vue3虽然兼容Vue2,但为了代码可读性、扩展性、可维护性,建议尽量不要混合使用,Vue3钩子函数需要放到setup函数中,且一个Vue文件最多只能有一个setup。混合使用过程中,Vue2方法可以访问setup内部对象,但是setup无法获取Vue2的对象。

Vue3是Vue2的升级版,性能得到极大提升,打包体积减少41%,初次渲染快55%,内存减少54%,相比Vue2开发更加高效,运行速度更快。适用于新项目开发。但目前兼容性不如Vue2,所以老项目依旧采用Vue2进行开发维护。

Vue3与Vue2最大的不同点在于:
Vue3引入了组合式API和函数式编程,更加高效实现数据响应式。
Vue3采用Proxy代理实现数据响应式,Vue2采用defineProperty实现数据响应式。Vue3代理方式解决了某些情况下Vue2数据更新页面未同步更新的问题。比如一个数组通过下标修改数据,Vue2语法下绑定该数组的对象页面不会自动更新,需要额外手动设置this.$set/Vue.set触发更新。

7.小结

本问旨在分析Vue3情况下页面切换下整个Vue文件执行过程,最后结尾补充了Vue3和Vue2做了个简单的对比。希望能给大家带来一点帮助,文中书写如有错误,请于评论中交流指正。

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

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

相关文章

git提交冲突的原因及解决方案

一、场景一 1.冲突原因 提交者的版本库 < 远程库 要保障提交者的版本库信息和远程仓库是一致的 2.解决方案 实现本地同步git pull,再提交代码&#xff08;最好每次git push之前都git pull一下&#xff0c;防止这种情况的出现&#xff09; 场景二 1.冲突原因 别人跟你…

【LeetCode】【算法】142. 环形链表II

142环形链表II 题目描述 给定一个链表的头节点 head &#xff0c;返回链表开始入环的第一个节点。 如果链表无环&#xff0c;则返回 null。 如果链表中有某个节点&#xff0c;可以通过连续跟踪 next 指针再次到达&#xff0c;则链表中存在环。 为了表示给定链表中的环&#x…

mysql批量生成修改数据库中字段类型的语句

假设需要修改数据库中所有datetime类型的字段为date类型SELECT cl.table_name,cl.column_name,cl.data_type,CONCAT("ALTER TABLE ", cl.table_name, " MODIFY COLUMN `", cl

前后端交互接口(一)

前后端交互接口&#xff08;一&#xff09; 前言 在上一集我们就完成了全局通知窗口的功能&#xff0c;这一集开始我们也要开始讲讲前后端交互接口这件事情&#xff0c;以及谈谈客户端和服务端开发的一些事情。 后续的规划 我们会先完成整个客户端才开始接入服务端的内容。…

HT7182 21V,14A高效升压转换器

1、特征 输入电压范围:2.7V-21V 输出电压范围:最高21V 固定开关频率:350kHz 可编程峰值电流:最高14A 高转换效率 95% (PVIN 12V, VOUT20V, IOUT 2A) 94% (PVIN 12V, VOUT20V, IOUT 4.5A) 93% (PVIN 7.2V, VOUT12V, IOUT 1.5A) 90% (PVIN 7.2V, VOUT12V, IOUT 5A) 96% (PVI…

【SNTP】Simple Network Time Protocol

SNTP&#xff08;Simple Network Time Protocol&#xff09;客户端是一种用于从时间服务器获取网络时间的应用程序或设备。SNTP是一种基于UDP的协议&#xff0c;它用于同步计算机和设备的本地时间与网络中的标准时间。 SNTP客户端通常用于以下情况&#xff1a; 时间同步&#…

python中对字典的遍历

python中,对字典的遍历很有用,平常编程中可能经常会用到。下面是几种常用的方法。 1. for循环遍历 stu_info = {"name": lily, "age": 18, "height": 170, "weight": 50}# 遍历方法1 for i in stu_info: # 这种其实是遍历键print…

解析Eureka的架构

1. 引言 1.1 Eureka的定义与背景 Eureka是由Netflix开发的一个RESTful服务&#xff0c;用于服务发现。它是微服务架构中的一个核心组件&#xff0c;主要用于管理服务的注册和发现。Eureka允许服务提供者注册自己的服务信息&#xff0c;同时也允许服务消费者查询可用的服务&am…

《野狗子:裂头怪》角色升级注意事项分享

《野狗子&#xff1a;裂头怪》中的角色升级是游戏里非常重要的事情&#xff0c;不过升级需要注意的事情就是如果你找到一个自己喜欢的角色&#xff0c;我们强烈建议你查看他们的所有被动技能&#xff0c;并尽早解锁一些! 野狗子裂头怪角色升级需要注意什么 在《野狗子 Slitter…

大语言模型训练的全过程:预训练、微调、RLHF

一、 大语言模型的训练过程 预训练阶段&#xff1a;PT&#xff08;Pre training&#xff09;。使用公开数据经过预训练得到预训练模型&#xff0c;预训练模型具备语言的初步理解&#xff1b;训练周期比较长&#xff1b;微调阶段1&#xff1a;SFT&#xff08;指令微调/有监督微调…

Audio-Language Models

根据最新的搜索结果&#xff0c;以下是一些表现最好的Audio-Language Models&#xff1a; Qwen-Audio&#xff1a;这是一个突破性的音频理解多模态模型&#xff0c;能够跨越30种任务和8种语言&#xff0c;效果超出预期。Qwen-Audio结合了音频和文本输入&#xff0c;将Qwen-7B语…

【linux学习2】linux基本命令行操作总结

系列文章目录 【linux学习1】原理以及应用 文章目录 系列文章目录前言Linux命令行操作-目录Linux命令行操作-关机Linux命令行操作-磁盘管理Linux命令行操作-文件管理Linux命令行操作-系统设置 前言 下面是参考资料&#xff1a; 菜鸟编程教程-Linux Linux命令大全 Linux命令行…

MySQL中,GROUP BY 分组函数

文章目录 示例查询&#xff1a;按性别分组统计每组信息示例查询&#xff1a;按性别分组显示详细信息示例查询&#xff1a;按性别分组并计算平均年龄,如果你还想统计每个性别的平均年龄&#xff0c;可以结合AVG()函数&#xff1a;说明 示例查询&#xff1a;按性别分组统计每组信…

兰空图床配置域名访问

图床已经创建完毕并且可以访问了&#xff0c;但是使用IP地址多少还是差点意思&#xff0c;而且不方便记忆&#xff0c;而NAT模式又没法直接像普通服务器一样DNS解析完就可以访问。 尝试了很多办法&#xff0c;nginx配置了半天也没配好&#xff0c;索性直接重定向&#xff0c;反…

数据分析师职业规划——数据分析师的职业焦虑与未来发展

身边的数据分析师经常有一种职业焦虑和怠倦感&#xff0c;尤其是三十岁左右的数据分析师。为什么会有这种感觉呢&#xff1f;怎样才能避免这种职业焦虑&#xff1f; 一、 数据分析师的打杂困惑 数据分析师的职业焦虑和怠倦来源于打杂困惑&#xff1a;做的事情都是打杂&#x…

Java智慧养老养老护理帮忙代办陪诊陪护平台系统小程序源码

&#x1f31f; 智慧养老新时代&#xff1a;养老护理、帮忙代办、陪诊陪护平台系统全解析 &#x1f3e1; &#x1f475; 引言&#xff1a;智慧养老&#xff0c;让爱无距离 随着科技的飞速发展&#xff0c;智慧养老已成为新时代老年人的新选择。通过养老护理、帮忙代办、陪诊陪护…

OpenCV视觉分析之目标跟踪(8)目标跟踪函数CamShift()使用

操作系统&#xff1a;ubuntu22.04 OpenCV版本&#xff1a;OpenCV4.9 IDE:Visual Studio Code 编程语言&#xff1a;C11 算法描述 找到物体的中心、大小和方向。 CamShift&#xff08;Continuously Adaptive Mean Shift&#xff09;是 OpenCV 中的一种目标跟踪算法&#xff0…

vue-svg-icon的安装和使用

vue-svg-icon 是一个用于在 Vue.js 项目中轻松使用 SVG 图标的库。以下是安装和使用 vue-svg-icon 的步骤&#xff0c;包括 Vue 2 和 Vue 3 的配置。 可以结合 iconfont 图标库使用 安装 vue-svg-icon 首先&#xff0c;确保你已经安装了 vue-svg-icon。你可以使用 npm 或 ya…

论文1—《基于卷积神经网络的手术机器人控制系统设计》文献阅读分析报告

论文报告&#xff1a;基于卷积神经网络的手术机器人控制系统设计 摘要 本研究针对传统手术机器人控制系统精准度不足的问题&#xff0c;提出了一种基于卷积神经网络的手术机器人控制系统设计。研究设计了控制系统的总体结构&#xff0c;并选用PCI插槽上直接内插CAN适配卡作为上…

Windows11下将某个程序添加到鼠标右键快捷菜单

经常看log&#xff0c;最喜欢用的txt查看和编辑工具是EditPlus&#xff0c;好像是个韩国软件&#xff0c;最大的优势是打开大文件&#xff0c;好几G的log文件也很轻松&#xff0c;速度快&#xff0c;然后还有各种高亮设置查找文件等&#xff0c;非常方便。但是不知道为什么&…