應(yīng)用provide與inject刷新Vue頁(yè)面方法

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

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

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

將整個(gè)頁(yè)面重載, 以下兩種都可以

1.window.location.reload()

2.this.$router.go()

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

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

<template>
  <div id="app" v-if="show"></div>
</template>
<script>
export default {
  // 控制顯示/隱藏, 實(shí)現(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)勢(shì)比較

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

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

您可能感興趣的文章:

相關(guān)文章

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