欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

單頁(yè)面Vue頁(yè)面刷新出現(xiàn)閃爍問(wèn)題及解決

 更新時(shí)間:2022年07月28日 11:18:20   作者:zhangjjjh  
這篇文章主要介紹了單頁(yè)面Vue頁(yè)面刷新出現(xiàn)閃爍問(wèn)題及解決方案,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教

分析原因: 為什么刷新會(huì)出現(xiàn)閃爍的問(wèn)題?

因?yàn)闉g覽器是html從上到下執(zhí)行,

先執(zhí)行Dom元素

然后執(zhí)行javaScript元素

當(dāng)走到j(luò)avaScript時(shí),Dom元素已經(jīng)開(kāi)始走動(dòng),所以如果網(wǎng)慢的話(huà),會(huì)顯示的特別明顯

解決方法: 使用 v-cloak 用法

v-cloak指令 和 css規(guī)則 [v-cloak] {display:none} 一起用時(shí),這個(gè)指令可以隱藏未編譯的Mustache標(biāo)簽直到實(shí)例準(zhǔn)備完畢。

原理:

帶有v-clock的的元素設(shè)置為display:none,隱藏掉,在等到vue解析到帶有v-clock的節(jié)點(diǎn)時(shí)候,會(huì)把a(bǔ)ttribute和class同時(shí)remove掉,這樣就可以實(shí)現(xiàn)防止節(jié)點(diǎn)的閃爍。

實(shí)例:

[v-cloak] {
display: none; 
} 
<div v-cloak>
{{ message }}
</div>

圖解:

html 代碼

加在掛載點(diǎn)(#app),可以讓整個(gè)頁(yè)面在未加載完JS時(shí),整個(gè)頁(yè)面都不渲染, 如果不需要,只需要在對(duì)應(yīng)閃爍的標(biāo)簽中加v-cloak即可

css 代碼

關(guān)于Vue刷新頁(yè)面問(wèn)題

Vue 中是單頁(yè)面,當(dāng)然需要刷新數(shù)據(jù)咯

你一定遇到這樣的需求:

比如在刪除或者增加一條記錄的時(shí)候希望當(dāng)前頁(yè)面可以重新刷新或者這個(gè)頁(yè)面有個(gè)組件 ,但是這個(gè)組件里面的點(diǎn)擊事件還是到當(dāng)前頁(yè)面 

如何解決 

1.在使用Vue-router做項(xiàng)目時(shí),會(huì)遇到如/serviceId/:id這樣只改變id號(hào)的場(chǎng)景。由于router-view是復(fù)用的,單純的改變id號(hào)并不會(huì)刷新router-view,而這并不是我們所期望的結(jié)果。

2.我們可以在點(diǎn)擊事件上  window.reload(),或者router.go(0)刷新時(shí),強(qiáng)制刷新整個(gè)頁(yè)面。整個(gè)瀏覽器進(jìn)行了重新加載,閃爍,體驗(yàn)不好

3.使用watch的方法,具體的可以看一下官方文檔

watch: {?
'$route': function (to, from) {?
? ? ? ?this.$store.dispatch('updateActiveTemplateId',?
? ? ? ?this.$route.params.templateId) // 通過(guò)更新Vuex中的store的數(shù)據(jù),讓數(shù)據(jù)發(fā)生變化?
? ? ? ? ? ?this.getTemplateById()?
} }

當(dāng)然我也看過(guò)一些博客,總結(jié)了下 如何更好的解決

provide / inject 組合

作用:允許一個(gè)祖先組件向其所有子孫后代注入一個(gè)依賴(lài),不論組件層次有多深,并在起上下游關(guān)系成立的時(shí)間里始終生效。

在你的App.vue頁(yè)面里面

聲明reload方法,控制router-view的顯示或隱藏,從而控制頁(yè)面的再次加載

然后在你的詳情頁(yè)面

tableList.vue:

在頁(yè)面注入App.vue組件提供(provide)的 reload 依賴(lài),在邏輯完成之后(刪除或添加...),直接this.reload()調(diào)用,即可刷新當(dāng)前頁(yè)面。

解釋下:

  • provide:選項(xiàng)應(yīng)該是一個(gè)對(duì)象或返回一個(gè)對(duì)象的函數(shù)。該對(duì)象包含可注入其子孫的屬性。
  • inject:一個(gè)字符串?dāng)?shù)組,或一個(gè)對(duì)象,對(duì)象的 key 是本地的綁定名

提示:provide 和 inject 綁定并不是可響應(yīng)的。這是刻意為之的。如果你傳入了一個(gè)可監(jiān)聽(tīng)的對(duì)象,那么其對(duì)象的屬性還是可響應(yīng)的。

當(dāng)然你不能 是在created里調(diào)用getData(), 在getData里又調(diào)用了this.reload().

這樣會(huì)導(dǎo)致死循環(huán)的 ,所以要合理的運(yùn)用就這個(gè)方法

以上為個(gè)人經(jīng)驗(yàn),希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。

相關(guān)文章

  • 在vue中v-for循環(huán)遍歷圖片不顯示錯(cuò)誤的解決方案

    在vue中v-for循環(huán)遍歷圖片不顯示錯(cuò)誤的解決方案

    這篇文章主要介紹了在vue中v-for循環(huán)遍歷圖片不顯示錯(cuò)誤的解決方案,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2022-01-01
  • vue+AI智能機(jī)器人回復(fù)功能實(shí)現(xiàn)

    vue+AI智能機(jī)器人回復(fù)功能實(shí)現(xiàn)

    這篇文章主要為大家詳細(xì)介紹了vue+AI智能機(jī)器人回復(fù)功能,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2020-07-07
  • Vue中進(jìn)行數(shù)據(jù)緩存的使用示例

    Vue中進(jìn)行數(shù)據(jù)緩存的使用示例

    數(shù)據(jù)緩存可以提高應(yīng)用程序的性能,減少網(wǎng)絡(luò)請(qǐng)求,提高用戶(hù)體驗(yàn),在本文中,我們介紹了Vue中如何進(jìn)行數(shù)據(jù)緩存,并提供了一些示例代碼,具有一定的參考價(jià)值,感興趣的可以了解一下
    2023-09-09
  • vue-cli解決IE瀏覽器sockjs-client錯(cuò)誤方法

    vue-cli解決IE瀏覽器sockjs-client錯(cuò)誤方法

    這篇文章主要為大家介紹了vue-cli解決IE瀏覽器sockjs-client錯(cuò)誤方法詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪
    2023-08-08
  • vue3數(shù)據(jù)可視化實(shí)現(xiàn)數(shù)字滾動(dòng)特效代碼

    vue3數(shù)據(jù)可視化實(shí)現(xiàn)數(shù)字滾動(dòng)特效代碼

    這篇文章主要介紹了vue3數(shù)據(jù)可視化實(shí)現(xiàn)數(shù)字滾動(dòng)特效,實(shí)現(xiàn)思路是使用Vue.component定義公共組件,使用window.requestAnimationFrame(首選,次選setTimeout)來(lái)循環(huán)數(shù)字動(dòng)畫(huà),詳細(xì)代碼跟隨小編一起看看吧
    2022-09-09
  • 使用window.open和vue router新開(kāi)頁(yè)面

    使用window.open和vue router新開(kāi)頁(yè)面

    這篇文章主要介紹了使用window.open和vue router新開(kāi)頁(yè)面方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2024-03-03
  • vue項(xiàng)目使用luckyexcel預(yù)覽excel表格功能(心路歷程)

    vue項(xiàng)目使用luckyexcel預(yù)覽excel表格功能(心路歷程)

    這篇文章主要介紹了vue項(xiàng)目使用luckyexcel預(yù)覽excel表格,我總共嘗試了2種方法預(yù)覽excel,均可實(shí)現(xiàn),還發(fā)現(xiàn)一種方法可以實(shí)現(xiàn),需要后端配合,叫做KKfileview,本文給大家介紹的非常詳細(xì),需要的朋友可以參考下
    2023-10-10
  • Vue實(shí)現(xiàn)上下層疊輪播圖

    Vue實(shí)現(xiàn)上下層疊輪播圖

    這篇文章主要介紹了Vue實(shí)現(xiàn)上下層疊輪播圖,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2022-04-04
  • vue使用this.$message不生效的部分原因及解決方案

    vue使用this.$message不生效的部分原因及解決方案

    這篇文章主要介紹了vue使用this.$message不生效的部分原因及解決方案,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2023-09-09
  • 淺析Vue 防抖與節(jié)流的使用

    淺析Vue 防抖與節(jié)流的使用

    防抖節(jié)流就是使用定時(shí)器 來(lái)實(shí)現(xiàn)我們的目的。這篇文章通過(guò)實(shí)例代碼給大家介紹vue防抖與節(jié)流的使用,感興趣的朋友跟隨小編一起看看吧
    2019-11-11

最新評(píng)論