vue3 路由缓存问题

目录

解决问题的思路:

解决问题的方案:

1、给roter-view添加key(破坏复用机制,强制销毁重建)

2、使用beforeRouteUpdate导航钩子

3、使用watch监听路由

vue3路由缓存:当用户从/users/johnny导航到/users/jolyne时,相同的组件实例被重复使用。由于两个路由都渲染相同的组件,比起销毁再创建,复用是比较高效的,但是这也会导致组件的生命周期狗子不会被调用

根据小仙兔项目进行代码编辑。

解决问题的思路:

1、让组件实例不复用,强制销毁重建

2、监听路由变化,变化之后执行数据更新

解决问题的方案:

1、给roter-view添加key(破坏复用机制,强制销毁重建)

当前路由完整路径为key的值,给router-view组件绑定

方法一:添加一个Key 破坏复用机制 强制销毁重建 太过粗暴 所有的都销毁重建
<RouterView :key='$route.fullPath' />

2、使用beforeRouteUpdate导航钩子

onBeforeUpdate:是生命周期钩子,在组件的任何响应式依赖发生变化之前被调用。这不仅仅是针对路由的,也包括其他的响应式数据。 

onBeforeUpdate:更为一般,任何响应式数据的变化都会触发这个钩子。如果你使用它来监听路由变化,你需要自己判断路由是否真的发生了变化

onBeforeUpdate:因为它响应组件内任何数据的变化,所以可能会在很多情况下被触发。但是,只要你避免在这个钩子里执行计算密集或昂贵的操作,性能影响应该是可以接受的

// 封装category相关的业务代码
import { getCategoryAPI } from "@/apis/category";
import { onBeforeRouteUpdate, useRoute } from "vue-router";
import { ref, onMounted } from "vue";
export function useCategory() {// 获取数据const categoryData = ref({});const route = useRoute();const getCategory = async (id = route.params.id) => {const res = await getCategoryAPI(id);categoryData.value = res.result;};onMounted(() => {getCategory(route.params.id);});// 目标:路由参数变化的时候,可以把分类数据接口重新发送onBeforeRouteUpdate((to) => {//console.log(to); //to代表目标路由对象// 存在问题:使用最新的路由参数请求最新的分类数据getCategory(to.params.id);});return {categoryData,};
}

在index.vue中引入使用

import { useCategory } from "@/views/Category/composables/useCategory";
const { categoryData } = useCategory();

3、使用watch监听路由

watch:通常用于监听某个特定的响应式引用或响应式对象的变化,并在这些变化时执行某些操作

watch:更为专一,只在所监听的响应式数据发生变化时执行。对于路由监听,它允许你精确地知道什么时候路由发生了变化,并提供了新旧值

watch:由于它只响应特定的数据变化,因此性能开销通常较小

在category中使用watch监听

// 封装category相关的业务代码
import { getCategoryAPI } from "@/apis/category";
import { useRoute } from "vue-router";
import { ref, onMounted, watch } from "vue";
export function useCategory() {// 获取数据const categoryData = ref({});const route = useRoute();const getCategory = async (id = route.params.id) => {const res = await getCategoryAPI(id);categoryData.value = res.result;};onMounted(() => {getCategory(route.params.id);});watch(() => route.params.id,(newValue, oldValue) => {// console.log(route, newValue, oldValue);if (newValue && route.path == `/category/${newValue}`) {//需要保证在跳转到的路由是咱们的目标路由时才请求分类的数据getCategory(newValue);}},{ deep: true });return {categoryData,};
}

可根据场景需要使用这三种方法

1、如果你只关心路由的变化,并且需要新旧值,使用 watch 可能更合适

2、如果你希望在组件的任何数据变化之前执行某些操作,无论是路由还是其他数据,那么 onBeforeUpdate 更为适合

 3、不在意性能问题,选择key,简单粗暴

如果只是为了监听路由变化,watch 可能更为适合,因为它提供了更精确的控制和明确的新旧值。而 onBeforeUpdate 更适用于在组件的任何数据变化之前执行操作的情况。不在意性能问题,选择key,简单粗暴

若有问题,可以留言~ :)

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

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

相关文章

比较杂的html元素

文章目录 abbrtimebqblockquotebrhrmetalink abbr 表示缩写 time 踢动给浏览器或搜索引擎阅读的事件&#xff1b;看着没什么效果 b 以前是一个无语义元素&#xff0c;主要用于加粗字体&#xff0c;有了css之后&#xff0c;加粗就不需要b元素了。 现在作为提醒注意&#xf…

C#判断字符串中有没有字母,正则表达式、IsLetter

要判断字符串中是否包含字母&#xff0c;可以使用正则表达式或者循环遍历字符串的方式。 方法一&#xff1a;使用正则表达式 using System.Text.RegularExpressions;string input "Hello123"; bool containsLetter Regex.IsMatch(input, "[a-zA-Z]");上…

【Java】Maven配置文件帮助文档(settings.xml 和 pom.xml)

文章目录 1. settings.xml1.1 localRepository1.2 interactiveMode1.3 offline1.4 pluginGroups1.5 proxies1.6 servers1.7 mirrors1.8 profiles1.9 activeProfiles 2. pom.xml2.1 本项目信息2.2 父项目信息2.3 prerequisites2.4 issueManagement2.5 ciManagement2.6 inception…

Linux网络编程:Socket套接字编程(Server服务器 Client客户端)

文章目录&#xff1a; 一&#xff1a;定义和流程分析 1.定义 2.流程分析 3.网络字节序 二&#xff1a;相关函数 IP地址转换函数inet_pton inet_ntop&#xff08;本地字节序 网络字节序&#xff09; socket函数(创建一个套接字) bind函数(给socket绑定一个服务器地址结…

Git概述

目录 一、什么是Git 二、什么是版本控制系统 三、Git和SVN对比 SVN集中式 SVN优缺点 Git分布式 Git优缺点 四、Git工作流程 四个工作区域 工作流程 五、Git下载与安装 一、什么是Git 很多人都知道&#xff0c;林纳斯托瓦兹在1991年创建了开源的Linux&#xff0c;从…

不是说嵌入式是风口吗,那为什么工作还那么难找?

最近确实有很多媒体、机构渲染嵌入式可以拿高薪&#xff0c;这在行业内也是事实&#xff0c;但前提是你有足够的竞争力&#xff0c;真的懂嵌入式。 时至今日&#xff0c;能做嵌入式程序开发的人其实相当常见&#xff0c;尤其是随着树莓派、Arduino等开发板的普及&#xff0c;甚…

[NLP] BERT模型参数量

一 BERT_Base 110M参数拆解 BERT_base模型的110M的参数具体是如何组成的呢&#xff0c;我们一起来计算一下&#xff1a; 刚好也能更深入地了解一下Transformer Encoder模型的架构细节。 借助transformers模块查看一下模型的架构&#xff1a; import torch from transformers …

Linux 线程库中的接口介绍

1.pthread_create()创建线程 pthread_create()的语法形式&#xff1a; 参数解释&#xff1a; 第一个参数thread&#xff1a;事先创建好的pthread_t类型的参数。成功时thread指向的内存单元被设置为新创建线程的线程ID。 第二个参数attr&#xff1a;用于定制各种不同的线程属性…

SQL Monitor Crack,PostgreSQL监控的传入复制图表

SQL Monitor Crack,PostgreSQL监控的传入复制图表  现在&#xff0c;您可以在从Estate页面导出的Microsoft Excel报告的摘要标题中看到UTC偏移量。 添加了PostgreSQL监控的传入复制图表。 Microsoft PowerShell API现在支持将使用New-SqlMonitorWindowsHost和New-SqlMonitorin…

QT-播放原始PCM音频流

QT multimedia audioplay.h /************************************************************************* 接口描述&#xff1a;原始音频播放类 拟制&#xff1a; 接口版本&#xff1a;V1.0 时间&#xff1a;20220922 说明&#xff1a; ********************************…

【二叉树】450. 删除二叉搜索树中的节点

450. 删除二叉搜索树中的节点 解题思路 搭建框架如果当前节点只有一个子节点 那么直接返回该节点拥有两个子节点 循环找到右边的最小值节点 也就是不断找左孩子 /*** Definition for a binary tree node.* public class TreeNode {* int val;* TreeNode left;* …

RN 之 TODO

调研&#xff1a; 好处&#xff1a; 前端技术栈&#xff0c;代码容易迁移 跨ios&#xff0c;安卓端&#xff0c;一次编写同时部署 坏处&#xff1a; 难于工程init/构建 antd难于集成&#xff0c;db难于集成&#xff0c;缺乏树控件 可能有功能无法实现&#xff0c;例如x/…

pythond assert 0 <= colx < X12_MAX_COLS AssertionError

python使用xlrd读取excel时&#xff0c;报错&#xff1a; assert 0 < colx < X12_MAX_COLS AssertionError 大意是excel列太多了。主要是xlrd库的问题。最好的方法是不用它&#xff0c;但是我用的其他人提供的工具用到它&#xff0c;没法改。 尝试手动删除excel的列&am…

【AI大模型】训练Al大模型

大模型超越AI 前言 洁洁的个人主页 我就问你有没有发挥&#xff01; 知行合一&#xff0c;志存高远。 目前所指的大模型&#xff0c;是“大规模深度学习模型”的简称&#xff0c;指具有大量参数和复杂结构的机器学习模型&#xff0c;可以处理大规模的数据和复杂的问题&#x…

MybatisPlus整合p6spy组件SQL分析

目录 p6spy java为什么需要 如何使用 其他配置 p6spy p6spy是一个开源项目&#xff0c;通常使用它来跟踪数据库操作&#xff0c;查看程序运行过程中执行的sql语句。 p6spy将应用的数据源给劫持了&#xff0c;应用操作数据库其实在调用p6spy的数据源&#xff0c;p6spy劫持到…

Unity框架学习--音频管理器

using System.Collections; using System.Collections.Generic; using UnityEngine;/// <summary> /// 音频管理器 /// </summary> public class AudioManager : SingletonMonoAutoBase1_DonDestoryOnLoad<AudioManager> {//各个声道的AudioSource组件AudioS…

c#实现依赖注入

当谈到C#中的依赖注入(Dependency Injection,DI)时,我们可以使用一个简单的示例来说明它是如何工作的。依赖注入是一种设计模式,用于将依赖关系从一个类传递到另一个类,以实现松耦合和可测试性。 假设我们有一个简单的订单处理应用程序,其中包含两个主要类:OrderServi…

音视频 ffplay命令-主要选项

选项说明-x width强制显示宽带-y height强制显示高度-video_size size帧尺寸 设置显示帧存储(WxH格式)&#xff0c;仅适用于类似原始YUV等没有包含帧大小(WxH)的视频-pixel_format format格式设置像素格式-fs以全屏模式启动-an禁用音频&#xff08;不播放声音&#xff09;-vn禁…

leetcode第359场周赛

随机更新.... 7004. 判别首字母缩略词 给你一个字符串数组 words 和一个字符串 s &#xff0c;请你判断 s 是不是 words 的 首字母缩略词 。 如果可以按顺序串联 words 中每个字符串的第一个字符形成字符串 s &#xff0c;则认为 s 是 words 的首字母缩略词。例如&#xff0c…

uniapp配置添加阿里巴巴图标icon流程步骤

文章目录 下载复制文件到项目文件夹里项目配置目录结构显示图标 下载 阿里巴巴icon官网 https://www.iconfont.cn/ 复制文件到项目文件夹里 项目配置目录结构 显示图标