vue实现页面渲染时候执行某需求

news2024/12/25 23:44:44

1. 前言

在之前的项目中,需要实现一个监控token是否过期从而动态刷新token的功能,然而在登录成功后创建的监控器会在浏览器刷新点击或者是通过导航栏输入网址时销毁...

2. 试错

前前后后始过很多方法,在这里就记录一下也许也能为各位读者排雷

2.1 window.addEventListener

一开始想到的是在每一个页面上加一个监听listener,监听页面加载事件,没当加载时候就调用检测token的方法,但是实际测试中并不能完全实现(主要在浏览器刷新点击)个人猜测可能是缓存问题,有时浏览器缓存可能导致脚本不按预期运行。

window.addEventListener('load', () => {
   console.log(11)
   onPageRender();
});

2.2 defineComponent

由于本人的项目是ts+vue的编译,一开始没想到用这个,就有了如下测试,即是在defineComponent中使用mounted钩子函数,每当页面动态刷新时都会调用生成监控器

<script lang="ts">
    import { defineComponent } from 'vue';
    import { onPageRender } from '@/utils/tokenMonitor'
    export default defineComponent({
        name: 'MyComponent',
    
        mounted() {
          // 在这里编写你的页面渲染逻辑
          onPageRender();
        },
    });
</script>

 但是在实际测试的过程中也是有时候正常有时候不正常,可能是我ts中使用响应式编程一些变量函数定义在这个defineComponent外面的原因(如下图所示),反正就是不能完美解决我的需求

3. 解决方案

在上图中使用 <script setup> 来定义script,官方的解释是这个setup就是会默认导出script中定义的所有内容,所以就不能再使用export default进行导出(ts会报错A module cannot have multiple default exports!!)该官方解释详见script setupicon-default.png?t=N7T8https://vuejs.org/api/sfc-script-setup.html在阅读官方文档的时候也是意外发现了最终的解决方案(在Using Custom Directives处,可以搜索一下)或者看我下面截图(不一定能正常显示,看得到最好啦😁)

 这里使用本地自定义指令,对于前端小白来说是一个新东西,根据官网的代码示例来改写代码就有了最终成功版本,此时每当页面加载到这个h1标签时候,就会执行vMonitorDirective中定义的beforeMount添加监控器,防止网站刷新时候被kill掉。最终测试结果也是正和我意,完美解决问题在此记录一下👍

const vMonitorDirective = {
  beforeMount: () => {
    // do something with the element
    onPageRender();
  }
}

// 绑定处,注意命名规范
<h1 v-Monitor-directive class="page-title">Orders</h1>

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

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

相关文章

按月爬取天气数据可视化展示

从天气网分析,可以查询每个月的天气情况,这里按照url规则,传入年月,获取数据,最后进行可视化展示,最终效果: 下面是获取过程: 第一步: import requestsdef get_weather(month):url = f"https://lishi.tianqi.com/nanning/{month}.html"response = reques…

I.MX6ULL的官方 SDK 移植实验

系列文章目录 I.MX6ULL的官方 SDK 移植实验 I.MX6ULL的官方 SDK 移植实验 系列文章目录一、前言二、I.MX6ULL 官方 SDK 包简介三、硬件原理图四、试验程序编写4.1 SDK 文件移植4.2 创建 cc.h 文件4.3 编写实验代码 五、编译下载验证5.1编写 Makefile 和链接脚本5.2编译下载 一、…

运维 之 大文件分片刻录光盘

需求 因有些企业中涉及设备只能通过光盘介质方式拷贝文件&#xff0c;然而采购的单张光盘又不能确保存放下一些较大的文件&#xff0c;所以只能通过分片的方式逐个光盘存储。 Windows处理 1、安装压缩软件&#xff08;自行选择&#xff0c;这里使用WinRAR&#xff09;、Ultr…

在CentOS7上安装Oracle11

一、概述 Oracle有两种安装方式&#xff0c;桌面安装和静默安装。这里我采用桌面安装的方式。 不得不说&#xff0c;Oracle真的是我目前为止安装过的最麻烦的软件没有之一&#xff0c;比K8S还麻烦&#xff0c;Oracle&#xff0c;真有你的&#xff01;废话不多说&#xff0c;臭…

多级留言/评论的功能实现——Vue3前端篇

文章目录 思路分析封装组件父组件模板逻辑样式 子组件——二级留言模板逻辑样式 子组件——三级留言以上模板逻辑样式 留言组件的使用 写完论文了&#xff0c;来把评论的前端部分补一下。 前端的实现思路是自己摸索出来的&#xff0c;没找到可以符合自己需求的参考&#xff0c;…

C++的类和对象

C面向对象的三大特性&#xff1a;封装&#xff0c;继承&#xff0c;多态 万事万物皆可为对象&#xff0c;有其相应的属性和行为 一、封装 1.1 封装的意义 将属性和行为作为一个整体&#xff0c;表现生活中的事物 将属性和行为加以权限控制 在设计类的时候&#xff0c;属性…

需求分析部分图形工具

描述复杂的事物时,图形远比文字叙述优越得多,它形象直观容易理解。前面已经介绍了用于建立功能模型的数据流图、用于建立数据模型的实体-联系图和用于建立行为模型的状态图,本节再简要地介绍在需求分析阶段可能用到的另外3种图形工具。 1 层次方框图 层次方框图用树形结…

开源模型应用落地-LangSmith试炼-入门初体验-数据集评估(三)

一、前言 LangSmith是一个用于构建生产级 LLM 应用程序的平台&#xff0c;它提供了调试、测试、评估和监控基于任何 LLM 框架构建的链和智能代理的功能&#xff0c;并能与LangChain无缝集成。通过使用LangSmith帮助开发者深入了解模型在不同场景下的表现&#xff0c;让开发者能…

论文阅读_管理模型的记忆_MemGPT

1 2 3 4 5 6 7 8 9英文名称: MemGPT: Towards LLMs as Operating Systems 中文名称: MemGPT&#xff1a;将LLMs打造成操作系统 链接: https://arxiv.org/abs/2310.08560 代码: https://github.com/cpacker/MemGPT 作者: Charles Packer, Sarah Wooders, Kevin Lin, Vivian Fang…

推荐10款优秀的组件库(一)

1.Ant Desgin UI 网址&#xff1a; https://ant-design-mobile.antgroup.com/zh Ant Design - 一套企业级 UI 设计语言和 React 组件库 "Ant Design Mobile"是一个在线的移动端Web体验平台&#xff0c;让你探索移动端Web的体验极限。 添加图片注释&#xff0c;不…

安全设计 | 安全设计不得马虎!微软STRIDE威胁建模方法让你事半功倍,快速发现应用安全隐患!

STRIDE威胁建模方法最早发表于2006年11月的《MSDN杂志》&#xff0c;作者是微软的工程师Shawn Hernan、Scott Lambert 、Tomasz Ostwald 和 Adam Shostack。那我们为什么要进行威胁建模&#xff1f; 如何使用数据流图对系统进行威胁建模&#xff1f;如何减轻威胁&#xff1f;接…

STM32F1之OV7725摄像头

目录 1. 摄像头简介 2. OV7725 摄像头简介 3. OV7725 引脚 4. OV7725 功能框架图 5. SCCB时序 5.1 SCCB 的起始、停止信号及数据有效性 5.2 SCCB 数据读写过程 1. 摄像头简介 在各类信息中&#xff0c;图像含有最丰富的信息&#xff0c;作为机…

从0开始学统计-蒙彼利埃尔悖论与条件概率

1.什么叫均衡可比&#xff1f; "均衡可比"指的是在进行比较时&#xff0c;确保所比较的对象或情况具有相似的特征和条件&#xff0c;以保持比较的公正性和准确性。这个概念通常应用于研究设计和数据分析中&#xff0c;以确保比较结果的可信度和有效性。 在研究中&a…

HTML静态网页成品作业(HTML+CSS)——企业酒店官网网页(5个页面)

&#x1f389;不定期分享源码&#xff0c;关注不丢失哦 文章目录 一、作品介绍二、作品演示三、代码目录四、网站代码HTML部分代码 五、源码获取 一、作品介绍 &#x1f3f7;️本套采用HTMLCSS&#xff0c;未使用Javacsript代码&#xff0c;共有5个页面。 二、作品演示 三、代…

SpringCloud系列(26)--OpenFeign超时控制

前言&#xff1a;在上一章节中我们简单的介绍了如何使用OprnFeign去调用微服务&#xff0c;因为消费侧和服务侧是两个不同的微服务&#xff0c;这样可能会出现超时的现象&#xff0c;例如服务侧需要3秒处理任何才能返回结果&#xff0c;但消费侧可能2秒就断开连接了&#xff0c…

C++代码错误解决1(函数模板)

1、代码如下 //示例函数模板的使用 #include <iostream> #include <string> using namespace std; template <typename T>//函数模板 T max(T a,T b) {return a>b?a:b; } int main() {int a,b;cout<<"input two integers to a&b:"…

文章解读与仿真程序复现思路——电力系统保护与控制EI\CSCD\北大核心《计及温控厌氧发酵和阶梯碳交易的农村综合能源低碳经济调度》

本专栏栏目提供文章与程序复现思路&#xff0c;具体已有的论文与论文源程序可翻阅本博主免费的专栏栏目《论文与完整程序》 论文与完整源程序_电网论文源程序的博客-CSDN博客https://blog.csdn.net/liang674027206/category_12531414.html 电网论文源程序-CSDN博客电网论文源…

如何处理时间序列的缺失数据

您是否应该删除、插入或估算&#xff1f; 世界上没有完美的数据集。每个数据科学家在数据探索过程中都会有这样的感觉&#xff1a; df.info()看到类似这样的内容&#xff1a; 大多数 ML 模型无法处理 NaN 或空值&#xff0c;因此如果您的特征或目标包含这些值&#xff0c;则在…

自己手写一个单向链表【C风格】

//单链表 #include <iostream> #define MAX_SIZE 20 #define OK 1 #define ERROR 0 #define TRUE 1 #define FALSE 0typedef int ElemType;//元素的类型 typedef int Status;//返回状态typedef struct Node {ElemType data;//链表中保存的数据struct Node* next;//指向下…

【字典树(前缀树) 异或 离线查询】1707. 与数组中元素的最大异或值

本文涉及知识点 字典树&#xff08;前缀树&#xff09; 位运算 异或 离线查询 LeetCode1707. 与数组中元素的最大异或值 给你一个由非负整数组成的数组 nums 。另有一个查询数组 queries &#xff0c;其中 queries[i] [xi, mi] 。 第 i 个查询的答案是 xi 和任何 nums 数组…