快捷導(dǎo)航

vue實(shí)現(xiàn)頁(yè)面渲染時(shí)候執(zhí)行某需求的示例代碼

更新時(shí)間：2024年05月23日 08:36:25 作者：躺平攻城獅

本文主要介紹了vue實(shí)現(xiàn)頁(yè)面渲染時(shí)候執(zhí)行某需求,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧

1. 前言

在之前的項(xiàng)目中，需要實(shí)現(xiàn)一個(gè)監(jiān)控token是否過(guò)期從而動(dòng)態(tài)刷新token的功能，然而在登錄成功后創(chuàng)建的監(jiān)控器會(huì)在瀏覽器刷新點(diǎn)擊或者是通過(guò)導(dǎo)航欄輸入網(wǎng)址時(shí)銷(xiāo)毀...

2. 試錯(cuò)

前前后后始過(guò)很多方法，在這里就記錄一下也許也能為各位讀者排雷

2.1 window.addEventListener

一開(kāi)始想到的是在每一個(gè)頁(yè)面上加一個(gè)監(jiān)聽(tīng)listener，監(jiān)聽(tīng)頁(yè)面加載事件，沒(méi)當(dāng)加載時(shí)候就調(diào)用檢測(cè)token的方法，但是實(shí)際測(cè)試中并不能完全實(shí)現(xiàn)（主要在瀏覽器刷新點(diǎn)擊）個(gè)人猜測(cè)可能是緩存問(wèn)題，有時(shí)瀏覽器緩存可能導(dǎo)致腳本不按預(yù)期運(yùn)行。

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

2.2 defineComponent

由于本人的項(xiàng)目是ts+vue的編譯，一開(kāi)始沒(méi)想到用這個(gè)，就有了如下測(cè)試，即是在defineComponent中使用mounted鉤子函數(shù)，每當(dāng)頁(yè)面動(dòng)態(tài)刷新時(shí)都會(huì)調(diào)用生成監(jiān)控器

<script lang="ts">
    import { defineComponent } from 'vue';
    import { onPageRender } from '@/utils/tokenMonitor'
    export default defineComponent({
        name: 'MyComponent',
    
        mounted() {
          // 在這里編寫(xiě)你的頁(yè)面渲染邏輯
          onPageRender();
        },
    });
</script>

但是在實(shí)際測(cè)試的過(guò)程中也是有時(shí)候正常有時(shí)候不正常，可能是我ts中使用響應(yīng)式編程一些變量函數(shù)定義在這個(gè)defineComponent外面的原因（如下圖所示），反正就是不能完美解決我的需求

3. 解決方案

在上圖中使用 <script setup> 來(lái)定義script，官方的解釋是這個(gè)setup就是會(huì)默認(rèn)導(dǎo)出script中定義的所有內(nèi)容，所以就不能再使用export default進(jìn)行導(dǎo)出（ts會(huì)報(bào)錯(cuò)A module cannot have multiple default exports！?。┰摴俜浇忉屧斠?jiàn)script setup

icon-default.png?t=N7T8

在閱讀官方文檔的時(shí)候也是意外發(fā)現(xiàn)了最終的解決方案（在Using Custom Directives處，可以搜索一下）或者看我下面截圖（不一定能正常顯示，看得到最好啦??）

這里使用本地自定義指令，對(duì)于前端小白來(lái)說(shuō)是一個(gè)新東西，根據(jù)官網(wǎng)的代碼示例來(lái)改寫(xiě)代碼就有了最終成功版本，此時(shí)每當(dāng)頁(yè)面加載到這個(gè)h1標(biāo)簽時(shí)候，就會(huì)執(zhí)行vMonitorDirective中定義的beforeMount添加監(jiān)控器，防止網(wǎng)站刷新時(shí)候被kill掉。最終測(cè)試結(jié)果也是正和我意，完美解決問(wèn)題在此記錄一下

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

// 綁定處，注意命名規(guī)范
<h1 v-Monitor-directive class="page-title">Orders</h1>

到此這篇關(guān)于vue實(shí)現(xiàn)頁(yè)面渲染時(shí)候執(zhí)行某需求的示例代碼的文章就介紹到這了,更多相關(guān)vue 頁(yè)面渲染執(zhí)行某需求內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: