應用provide與inject刷新Vue頁面方法

更新時間：2021年09月24日 11:34:09 作者：SpringSir

這篇文章主要介紹了應用provide與inject刷新Vue頁面的兩種方法，有需要的朋友可以借鑒參考下，希望能夠有所幫助，多多進步，祝大家早日升職加薪

方法1：直接調(diào)用函數(shù)

將整個頁面重載, 以下兩種都可以

1.window.location.reload()

2.this.$router.go()

方法2：采用provide / inject(靜刷新)

在高階函數(shù)中聲明一個reload刷新函數(shù)

<template>
  <div id="app" v-if="show"></div>
</template>
<script>
export default {
  // 控制顯示/隱藏, 實現(xiàn)刷新
  data () {
    return {
      show: true
    }
  },
  // 把刷新的方法傳給低階組件
  provide () {
    return {
      reload: this.reload
    }
  },
  methods: {
    // 高階組件定義刷新方法
    reload () {
      this.bol = false
      this.$nextTick(() => {
        this.bol = true
      })
    }
  }
}
</script>

在低階組件中使用刷新函數(shù)

<template>
  <div></div>
</template>
<script>
export default {
  inject: ['reload'],
  methods: {
    // 低階組件, 刷新
    fun () {
      this.reload()
    }
  }
}
</script>

優(yōu)勢比較

方法1中直接調(diào)用函數(shù), 會導致整個網(wǎng)站刷新，會浪費性能些，用戶體驗也不好; 大型網(wǎng)站這樣刷新下，需要等幾秒瀏覽器左上角可以看到刷新的動畫;
方法2中采用provide / inject, 用戶不會感覺到刷新, 而且刷新的頁面內(nèi)容范圍可控制, 相對浪費性能會少很多

以上就是應用provide與inject刷新Vue頁面方法的詳細內(nèi)容，更多關于Vue頁面刷新的資料請關注腳本之家其它相關文章！

您可能感興趣的文章:

正確更改Ant?Design?of?Vue樣式的問題
這篇文章主要介紹了正確更改Ant?Design?of?Vue樣式的問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2022-09-09
常見的5種Vue組件通信方式總結
在?Vue.js?中,組件通信是開發(fā)過程中非常重要的一部分,它涉及到不同組件之間的數(shù)據(jù)傳遞和交互,本文將介紹如何實現(xiàn)父子組件之間的有效通信,并盤點了常見的5種Vue組件通信方式總結,需要的朋友可以參考下
2024-03-03
nuxt中刷新頁面后防止store值丟失問題
這篇文章主要介紹了nuxt中刷新頁面后防止store值丟失問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
2023-10-10
詳解Vue demo實現(xiàn)商品列表的展示
這篇文章主要介紹了Vue demo實現(xiàn)商品列表的展示，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
2019-05-05
Element?Plus?去掉表格外邊框的實現(xiàn)代碼
使用el-table組件拖拽時,?想使用自定義樣式進行拖拽,?想去掉外邊框,?并在表頭加入豎杠樣式,本文給大家介紹Element?Plus?去掉表格外邊框的實現(xiàn)代碼,感興趣的朋友一起看看吧
2025-04-04
解決vue-cli項目打包出現(xiàn)空白頁和路徑錯誤的問題
今天小編就為大家分享一篇解決vue-cli項目打包出現(xiàn)空白頁和路徑錯誤的問題。具有很好的參考價值。希望對大家有所幫助。一起跟隨小編過來看看吧
2018-09-09
vue3中給數(shù)組賦值丟失響應式的解決
這篇文章主要介紹了vue3中給數(shù)組賦值丟失響應式的解決方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2023-04-04
學習Vite的原理
這篇文章主要介紹了Vite的原理，Vite是一個更輕、更快的web應用開發(fā)工具，面向現(xiàn)代瀏覽，Vite創(chuàng)建的項目是一個普通的Vue3應用，相比基于Vue-cli創(chuàng)建的應用少了很多配置文件和依賴，下面基于Vite相關資料內(nèi)容，需要的朋友可以參考一下
2022-02-02
在?Vue?中使用?dhtmlxGantt?組件時遇到的問題匯總(推薦)
dhtmlxGantt一個功能豐富的甘特圖插件，支持任務編輯，資源分配和多種視圖模式，這篇文章主要介紹了在?Vue?中使用?dhtmlxGantt?組件時遇到的問題匯總,需要的朋友可以參考下
2023-03-03
如何利用vue3實現(xiàn)一個俄羅斯方塊
俄羅斯方塊這個游戲相信大家都玩過,下面這篇文章主要給大家介紹了關于如何利用vue3實現(xiàn)一個俄羅斯方塊的相關資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下
2022-01-01