快捷導(dǎo)航

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

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

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

1. 前言

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

2. 試錯

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

2.1 window.addEventListener

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

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

2.2 defineComponent

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

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

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

3. 解決方案

在上圖中使用 <script setup> 來定義script，官方的解釋是這個setup就是會默認(rèn)導(dǎo)出script中定義的所有內(nèi)容，所以就不能再使用export default進(jìn)行導(dǎo)出（ts會報錯A module cannot have multiple default exports！！）該官方解釋詳見script setup

icon-default.png?t=N7T8

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

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

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

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

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

您可能感興趣的文章: