1. 前言

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

2. 試錯

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

2.1 window.addEventListener

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

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

2.2 defineComponent

由于本人的項目是ts+vue的編譯，一開始沒想到用這個，就有了如下測試，即是在defineComponent中使用mounted鉤子函數(shù)，每當頁面動態(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中使用響應式編程一些變量函數(shù)定義在這個defineComponent外面的原因（如下圖所示），反正就是不能完美解決我的需求

3. 解決方案

在上圖中使用 <script setup> 來定義script，官方的解釋是這個setup就是會默認導出script中定義的所有內(nèi)容，所以就不能再使用export default進行導出（ts會報錯A module cannot have multiple default exports！?。┰摴俜浇忉屧斠?a rel="external nofollow" target="_blank">script setup

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

這里使用本地自定義指令，對于前端小白來說是一個新東西，根據(jù)官網(wǎng)的代碼示例來改寫代碼就有了最終成功版本，此時每當頁面加載到這個h1標簽時候，就會執(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)文章希望大家以后多多支持腳本之家！ 

最新評論