从分析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做了个简单的对比。希望能给大家带来一点帮助，文中书写如有错误，请于评论中交流指正。

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

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

相关文章

43.第二阶段x86游戏实战2-提取游戏里面的lua

43.第二阶段x86游戏实战2-提取游戏里面的lua

免责声明：内容仅供学习参考，请合法利用知识，禁止进行违法犯罪活动！ 本次游戏没法给 内容参考于：微尘网络安全 本人写的内容纯属胡编乱造，全都是合成造假，仅仅只是为了娱乐，请不要…
阅读更多...
是时候用开源降低AI落地门槛了

是时候用开源降低AI落地门槛了

过去三十多年，从Linux到KVM，从OpenStack到Kubernetes，IT领域众多关键技术都来自开源。开源技术不仅大幅降低了IT成本，也降低了企业技术创新的门槛。 那么，在生成式AI时代，开源能够为AI带来什么？…
阅读更多...
xlwings，让excel飞起来！

xlwings，让excel飞起来！

excel已经成为必不可少的数据处理软件，几乎天天在用。python有很多支持操作excel的第三方库，xlwings是其中一个。 关于xlwings xlwings开源免费，能够非常方便的读写Excel文件中的数据，并且能够进行单元格格式的修改。 xlwings还…
阅读更多...
【分布式事务】二、NET8分布式事务实践： DotNetCore.CAP 框架 、 消息队列（RabbitMQ）、 数据库（MySql、MongoDB）

【分布式事务】二、NET8分布式事务实践： DotNetCore.CAP 框架 、 消息队列（RabbitMQ）、 数据库（MySql、MongoDB）

介绍 [CAP]是一个用来解决微服务或者分布式系统中分布式事务问题的一个开源项目解决方案， 同样可以用来作为 EventBus 使用 github地址：https://github.com/dotnetcore/CAP官网地址： https://cap.dotnetcore.xyz/官网文档：https://cap.dotnetcore.xyz/userguide/zh/cap/id…
阅读更多...
【论文阅读】Learning dynamic alignment via meta-filter for few-shot learning

【论文阅读】Learning dynamic alignment via meta-filter for few-shot learning

通过元滤波器学习动态对齐以实现小样本学习 引用：Xu C, Fu Y, Liu C, et al. Learning dynamic alignment via meta-filter for few-shot learning[C]//Proceedings of the IEEE/CVF conference on computer vision and pattern recognition. 2021: 5182-5191. 论文…
阅读更多...
IDEA 2024使用mybatisplus插件生成代码在项目中

IDEA 2024使用mybatisplus插件生成代码在项目中

在IDEA 插件市场搜索“mybatisplus”插件并安装，安装好后重启IDEA，安装过程网上很多教程，这里略过；IDEA 2024配置数据库和生成代码迁移到了Tools菜单下，原先版本在Other; 先完成数据库配置，点击Config Data…
阅读更多...
Android CCodec Codec2 （十九）C2LinearBlock

Android CCodec Codec2 （十九）C2LinearBlock

在上一篇文章的结尾，我们看到fetchLinearBlock方法最终创建了一个C2LinearBlock对象。这一节，我们将深入了解C2LinearBlock是什么，它的作用是什么，以及它是如何被创建的。 1、_C2BlockFactory 先对上一篇文章的结尾内容做简单回顾…
阅读更多...
LabVIEW离心泵性能优化测试系统

LabVIEW离心泵性能优化测试系统

开发了一套基于LabVIEW平台开发的离心泵性能优化测试系统。系统集成了数据采集、流量控制、数据存储、报表生成等功能，提供了低成本、便捷操作的解决方案，适用于工业场景中对离心泵性能的精确测评。 项目背景 随着工业化进程的加速，离心泵在…
阅读更多...
【NLP自然语言处理】深入探索Self-Attention：自注意力机制详解

【NLP自然语言处理】深入探索Self-Attention：自注意力机制详解

目录 🍔 Self-attention的特点 🍔 Self-attention中的归一化概述 🍔 softmax的梯度变化 3.1 softmax函数的输入分布是如何影响输出的 3.2 softmax函数在反向传播的过程中是如何梯度求导的 3.3 softmax函数出现梯度消失现象的原因 &…
阅读更多...
MML 中使用 libevent +std::async unix socket domain 进程间通信

MML 中使用 libevent +std::async unix socket domain 进程间通信

可以执行大量超时的接口,直到任务执行完成 还可以在一个事件做检测，funtcure 中的值为ready 状态 uds 的用法和tcp 类似，会维护一个链接状态和分配一个链接套接字,这就为异步执行提供了很方便的条件 客户端就安静的做一个计时,看是否在固定事件内返回执行…
阅读更多...
基础算法练习--滑动窗口(已完结)

基础算法练习--滑动窗口(已完结)

算法介绍 滑动窗口算法来自tcp协议的一种特性,它的高效使得其也变成了算法题的一种重要考点.滑动窗口的实现实际上也是通过两个指针前后遍历集合实现,但是因为它有固定的解题格式,我将其单独做成一个篇章. 滑动窗口的解题格式: 首先,定义两个指针left和right,与双指针不同的…
阅读更多...
算法：只出现一次的数字II

算法：只出现一次的数字II

题目 链接：leetcode链接 思路分析 这道题目其实是一个观察题，比较考察观察能力。 数组中只有一个元素只出现一次，其他的元素都出现三次 我们假设有n个元素出现三次 那么所有的元素的第i位的和加起来只有下面的四种情况 3n * 0 0 3n * 0…
阅读更多...
【rust】rust基础代码案例

【rust】rust基础代码案例

文章目录 代码篇HelloWorld斐波那契数列计算表达式（加减乘除）web接口 优化篇target/目录占用一个g，仅仅一个actix的helloWorld demo升级rust版本， 通过rustupcargo换源windows下放弃吧，需要额外安装1g的toolchain并且要…
阅读更多...
鸿蒙基本组件结构

鸿蒙基本组件结构

组件结构 1. 认识基本的组件结构 ArkTS通过装饰器Component 和Entry 装饰 struct 关键字声明的数据结构，构成一个自定义组件 自定义组件中提供了一个build函数，开发者需要在函数内以链式调用的方式进行基本的UI描述，UI描述的方法请参考UI描述…
阅读更多...
Python并发编程库：Asyncio的异步编程实战

Python并发编程库：Asyncio的异步编程实战

Python并发编程库：Asyncio的异步编程实战 在现代应用中，并发和高效的I/O处理是影响系统性能的关键因素之一。Python的asyncio库是专为异步编程设计的模块，提供了一种更加高效、易读的并发编程方式，适用于处理大量的I/O密集型任务…
阅读更多...
快速开发工具 Vite

快速开发工具 Vite

快速开发工具 vite 摘要： **概念：**Vite 是一种新型前端构建工具，能够显著提升前端开发体验 **构造：**Vite 主要由一个开发服务器和一套构建指令组成。 Vite底层的服务器转换和转发：以处理ts文件为例 1-读取 forma…
阅读更多...
Servlet-Filter

Servlet-Filter

文章目录 一. Filter 过滤器1. 概括2. 原理3. api配置过滤器(Filter)拦截路径1.xml 方式2.注解方式 4. 生命流程a.执行流程b.拦截路径c.过滤器链 5. 登录校验-Filter 一. Filter 过滤器 1. 概括 过滤器，顾名思义就是对事物进行过滤的，在 Web 中的过滤器…
阅读更多...
Hadoop简介及单点伪分布式安装

Hadoop简介及单点伪分布式安装

目录 1. 大数据2. Hadoop简介3. Hadoop伪分布式安装4. Hadoop启动参考 1. 大数据 大数据的定义：一种规模大到在获取、存储、管理、分析方面大大超出传统数据库软件工具能力范围的数据集合。   特征：   1.海量的数据规模   2.快速的数据流转   3.…
阅读更多...
python练习-袭击敌机

python练习-袭击敌机

$ python -m pip install --user pygame1、画游戏框 class Settings:def __init__(self):self.screen_width 1200self.screen_height 800self.bg_color (230, 230, 230)import sys import pygame from settings import Settingsclass AlienInvasion:def __init__(self):pyg…
阅读更多...
京东零售推荐系统可解释能力详解

京东零售推荐系统可解释能力详解

作者：智能平台 张颖 本文导读 本文将介绍可解释能力在京东零售推荐系统中的应用实践。主要内容包括以下几大部分：推荐系统可解释定义、系统架构、排序可解释、模型可解释、流量可解释。 推荐系统可解释定义 推荐系统可解释的核心包括三部分&#xff0…
阅读更多...
最新文章

Copyright @ 2022~2023