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

news2024/11/9 2:30:09

文章目录

    • 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.coloradmin.cn/o/2236267.html

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

相关文章

超分辨重建——复现SwinIR网络推理测试(详细图文教程)

💪 专业从事且热爱图像处理,图像处理专栏更新如下👇: 📝《图像去噪》 📝《超分辨率重建》 📝《语义分割》 📝《风格迁移》 📝《目标检测》 📝《图像增强》 &a…

【青牛科技】应用方案 | D75xx-150mA三端稳压器

概 述 D75XX系列是一套三端高电流低压稳压器。它们可以提供 150mA 的输出电流和允许输入电压高达30V。它们有几个固定的输出电压范围为3.0 V至5.0 V。CMOS 技术确保低电压降和低静态电流。 虽然这些设备主要设计为固定电压调节器,但它们可以与外部元件一起使用&…

BO-CNN-LSTM回归预测 | MATLAB实现BO-CNN-LSTM贝叶斯优化卷积神经网络-长短期记忆网络多输入单输出回归预测

BO-CNN-LSTM回归预测 | MATLAB实现BO-CNN-LSTM贝叶斯优化卷积神经网络-长短期记忆网络多输入单输出回归预测 目录 BO-CNN-LSTM回归预测 | MATLAB实现BO-CNN-LSTM贝叶斯优化卷积神经网络-长短期记忆网络多输入单输出回归预测效果一览基本介绍模型搭建程序设计参考资料 效果一览 …

WPF 打包

打包为单个exe文件直接运行 - - -版本.NET8 新建WPF项目 右键 - 发布 选择发布文件夹 选择发布文件夹 选择发布文件夹 配置 配置,保存 发布 WPF 打包为exe安装程序 示例 实现思路 引导项目中嵌入其它项目可运行目录的zip引导项目中解压zip文件到指定文件夹是…

三维测量与建模笔记 - 3.3 张正友标定法

上图中,提到了世界坐标系在张正友标定法中的设计,可以理解为将世界坐标系的原点放到了棋盘格左上角点的位置,并且棋盘格平面上所有点的Z为0,将Z规定为0的话,可以简化掉一个维度(列向量r3)。去掉…

【解决办法】无法使用右键“通过VSCode打开文件夹”

个人博客:苏三有春的博客 前言 作者的编程环境为VScode,工作时常使用VScode打开整个工程文件夹。如果先打开VScode再从VScode中选择文件夹打开效率太慢,作者一般使用的方式是右键文件夹,直接选择"通过code打开文件夹"…

推荐一款ETCD桌面客户端——Etcd Workbench

Etcd Workbench 我相信很多人在开始管理ETCD的时候都去搜了Etcd客户端工具,然后找到了官方的Etcd Manager,但用完之后发现它并不好用,还不支持多连接和代码格式化,并且已经好几年不更新了,于是市面上就有了好多其他客…

Docker配置及简单应用

谈论/理解 Docker 的常用核心部分,以下皆在 Ubuntu 操作系统下进行 1 国内源安装 Docker-ce 1.1 配置 Linux 内核流量转发 因为docker和宿主机的端口映射,本质是内核的流量转发功能,所以要对其进行配置 1.1.1 未配置流量转发 如果没有配置流…

(十二)JavaWeb后端开发——MySQL数据库

目录 1.数据库概述 2.MyQSL 3.数据库设计 DDL 4.MySQL常见数据类型 5.DML 1.数据库概述 数据库:DataBase(DB),是存储和管理数据的仓库 数据库管理系统:DataBase ManagementSystem(DBMS),操纵和管理数据库的大型软件 SQL&a…

fastadmin后台列表根据所选中的行统计指定字段|fastadmin点击checkbox或反选统计某个字段的值

当选中对应行时,统计选中行的用户注册数和用户点击数。 此项功能需要有 点击全选触发事件、点击反选触发事件、勾选某一行触发事件、反选某一行触发事件,用到fastadmin自带的表格事件功能,参考:https://doc.fastadmin.net/doc/19…

stm32使用串口DMA实现数据的收发

前言 DMA的作用就是帮助CPU来传输数据,从而使CPU去完成更重要的任务,不浪费CPU的时间。 一、配置stm32cubeMX 这两个全添加上。参数配置一般默认即可 代码部分 只需要把上期文章里的HAL_UART_Transmit_IT(&huart2,DATE,2); 全都改为HAL_UART_Tra…

轨迹规划中优化预测:学习多个初始解的优化器

Abstract 在许多应用中,如机器人控制、自动驾驶和投资组合管理,需要在严格的运行时间限制下连续地解决相似的优化问题。在这种情况下,局部优化方法的性能对初始解的质量非常敏感:不良的初始化可能会导致收敛缓慢或得到次优解。为…

05 SQL炼金术:深入探索与实战优化

文章目录 SQL炼金术:深入探索与实战优化一、SQL解析与执行计划1.1 获取执行计划1.2 解读执行计划 二、统计信息与执行上下文2.1 收集统计信息2.2 执行上下文 三、SQL优化工具与实战3.1 SQL Profile3.2 Hint3.3 Plan Baselines3.4 实战优化示例 SQL炼金术&#xff1a…

JS封装随机生成一个颜色值工具函数

本文给大家带来的是封装的一个随机生成一个颜色值的工具函数。案例中提供了4个不同的调用函数,但实现的功能本质上都是一样的,开箱即用,随调随用。 //方法一 function getRandomColor() { //随机颜色return #${Math.floor(Math.random() * …

CESS 正式加入政府区块链协会 (GBA) ,出席 Blockchain Infrastructure 大会

北京时间 11 月 6 日,特朗普赢得 2024 年美国总统大选。与此同时,我们很高兴地宣布,CESS 已正式加入政府区块链协会 (GBA)。GBA 是一个全球性协会,致力于将区块链专业人士汇聚在一起,共同推动区块链技术在政府、金融和…

ARXML汽车可扩展标记性语言规范讲解

ARXML: Automotive Extensible Markup Language (汽车可扩展标记语言) xmlns: Xml name space (xml 命名空间) xsd: Xml Schema Definition (xml 架构定义) 1、XML与HTML的区别,可扩展。 可扩展,主要是…

数据结构_哈夫曼树及其应用

构造算法的例子 构造算法的实现 初始化&#xff0c;置权值 int i, m, s1, s2;m 2 * n - 1;for (i 1; i < m; i){HT[i].lch 0;HT[i].rch 0;HT[i].parent 0;}for (i 1; i < n; i){cin >> HT[i].weight;}合并结点 // 创建哈夫曼树for (i n 1; i < m; i){s1…

基于AI深度学习的中医针灸实训室腹针穴位智能辅助定位系统开发

在中医针灸的传统治疗中&#xff0c;穴位取穴的精确度对于治疗效果至关重要。然而&#xff0c;传统的定位方法&#xff0c;如体表标志法、骨度折量法和指寸法&#xff0c;由于观察角度、个体差异&#xff08;如人体姿态和皮肤纹理&#xff09;以及环境因素的干扰&#xff0c;往…

esp32学习:利用虫洞ESP32开发板,快速实现无线图传

我们的虫洞开发板&#xff0c;能够完美运行esp who AI代码&#xff0c;所以实现无线图传那是非常容易的&#xff0c;我们先看看examples目录&#xff1a; 里面有比较多的web例程&#xff0c;在这些例程下&#xff0c;稍作修改&#xff0c;就可以快速实现我的图传无线功能&#…

力扣排序455题(分发饼干)

假设你是一位很棒的家长&#xff0c;想要给你的孩子们一些小饼干。 但是&#xff0c;每个孩子最多只能给一块饼干。 对每个孩子 i&#xff0c;都有一个胃口值 g[i],这是能 让孩子们满足胃口的饼干的最小尺寸;并且每块饼 干j&#xff0c;都有一个尺寸 s[j]。如果 s[j]> g[i]&…